2014-05-20 158 views
0

我已經通過網上的每個例子,但我找不到這樣一個簡單的事情的答案。 我所做的: 創建一個新的asp.net項目 在母版頁,添加鏈接到jQuery的:jQuery Tabs on ASP.Net Master Page

<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> 
  1. 的jQuery在頁面上成功加載。我可以在頁面上使用jQuery功能。
  2. 控件是客戶端,因爲主頁面 而沒有重命名。 Resulting webpage
  3. 標籤根本不工作。

請幫

回答

1

它看起來像你錯過了style sheet

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

此外,檢查控制檯查看,如果您有任何錯誤,我懷疑引用(//code...)是OK?

+1

謝謝!!!!!!! –

1

您缺少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/