Question

我在网上看过每一个例子，但我找不到这么简单的答案。我做了什么：创建一个新的asp.net项目在母版页中，添加指向jQuery的链接：

<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

添加新页面（包含母版页）：

  <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestJSTab_MasterPage.Content.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
      <script>
          $(function () {
              $("#tabs").tabs();
          })
      </script>
    <div id="tabs" >
        <ul>
            <li><a href="#fragment-1"><span>One</span></a></li>
            <li><a href="#fragment-2"><span>Two</span></a></li>
        </ul>
        <div id="fragment-1">
            <p>First tab is active by default:</p>
        </div>
        <div id="fragment-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>
</asp:Content>

jQuery在页面上成功加载。我可以在页面上使用jQuery函数。
控件是客户端，由于母版页而未重命名。
标签根本不起作用。

请帮忙

Answer 1

您似乎错过了style sheet？

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

另外，检查控制台是否有任何错误，我怀疑引用（//code...）是否正常？

Answer 2

您缺少css文件参考。

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.css

<div id="tabs" >
        <ul>
            <li><a href="#fragment-1"><span>One</span></a></li>
            <li><a href="#fragment-2"><span>Two</span></a></li>
        </ul>
        <div id="fragment-1">
            <p>First tab is active by default:</p>
        </div>
        <div id="fragment-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>

$（ “＃选项卡”）的选项卡（）;

演示：

http://jsfiddle.net/mANq7/

ASP.Net母版页上的jQuery选项卡

2 个答案: