2014-05-20 6 views
0

나는 모든 예를 온라인으로 경험했지만 그와 같은 단순한 답을 찾을 수는 없습니다. 내가했던 무엇 :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> 

하는 (masterpage로) 새로운 페이지를 추가합니다 :

<%@ 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를에 링크를 추가, 마스터 페이지에서 새로운 asp.net 프로젝트 만들기 페이지에 성공적으로로드되었습니다. 페이지에서 jQuery 함수를 사용할 수 있습니다.
  2. 컨트롤은 클라이언트 쪽이며 마스터 페이지 때문에 이름이 변경되지 않습니다. Resulting webpage
  3. 탭은 단순히 작동하지 않습니다.

당신이 style sheet을 놓치고있는 것 같습니다

답변

1

도와주세요?

또한
<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/

관련 문제