使用jQuery创建标签

Question

I'm trying to create tabs on my Content Page, but it does not work for me. I've added the scripts to the Master Page

<script src="Scripts/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.2.0.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.11.4.js" type="text/javascript"></script>

and then trying to add tabs on the Content Page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="AddMember.aspx.cs" Inherits="EOSProject.AddMember" %>

<asp:Content ID="Content1" runat="server" contentplaceholderid="MainContent">        
    <script type="text/javascript">
            $(document).ready(function () {
                $(" #tabs ").tabs();
            });
        </script>
        <div id="tabs">
            <ul>
                <li> <a href="#tabs-1"> First Tab </a> </li>
                <li> <a href="#tabs-2"> Second Tab </a> </li>
                <li> <a href="#tabs-3"> Third Tab </a> </li>
            </ul>
              <div id="tabs-1">
                  Tab1
              </div>
            <div id="tabs-2">
                Tab2
            </div>
            <div id="tabs-3">
                Tab3
            </div>
        </div>
</asp:Content>

is there something missing ?

Thanks in Advance :)

Answer 1

Well, I don't know what it looks like on your screen, but if I add jQuery, jQuery UI JS, and jQuery UI CSS, everything works.

Here's a Fiddle .

I would make sure you're referencing your scripts correctly, and are also including the CSS file for good measure..

As a quick test, you can include these references and see if the tabs show up:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>