JQuery не работает на странице содержания

Question

Возможно ли иметь вкладку в виде страницы с использованием пользовательского интерфейса JQuery? У меня есть вкладка макета на главной странице, и когда я пытаюсь добавить еще один макет с вкладками на странице контента, JQuery игнорируется.

Или как я могу использовать пользовательский интерфейс Jquery на странице контента? Предположим, что у меня есть кнопка на странице содержимого и вы хотите получить эффект пользовательского интерфейса из файла css. Это возможно? Может ли кто-нибудь дать мне пример для примера?

Любая помощь действительно оценена.

вот код главной страницы для того же, где он отлично работает.

Раздел заголовка содержит ссылку на файл Jquery.

<link href="css/jquery-ui.css" rel="stylesheet" /> 

    <style> 

.ui-tabs-vertical { width: 55em; } 
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 8em; } 
.ui-tabs-vertical .ui-tabs-nav li { width: 8em; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } 
.ui-tabs-vertical .ui-tabs-nav li a { width:6em ; border:none} 
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border:none; display:block } 
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} 
    </style> 
<asp:ContentPlaceHolder ID="head" runat="server"> 
</asp:ContentPlaceHolder> 

<div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">First Tab</a></li> 
       <li><a href="#tabs-2">Second</a></li> 
       <li><a href="#tabs-3">Third</a></li> 
      </ul> 
      <div id="tabs-1">Data from Tab1</div> 
      <div id="tabs-2">Data from Tab2</div> 
      <div id="tabs-3">Data from Tab3</div> 
     </div> 
     <div> 
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 

      </asp:ContentPlaceHolder> 
     </div> 


    </form> 
    <script type="text/javascript" src="external/jquery/jquery.js"></script> 
    <script type="text/javascript" src="js/jquery-ui.js"></script> 
    <script> 
     $(document).ready(function() { 
      //alert("Hi from JS"); 
     }); 

     $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); 
     $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); 

    </script> 

Теперь вот моя страница содержание.

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 

</asp:Content> 

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
     <link href="css/jquery-ui.css" type="text/css" rel="stylesheet" /> 
     <style> 

     </style> 
      <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-4">First Tab</a></li> 
       <li><a href="#tabs-5">Second</a></li> 
       <li><a href="#tabs-6">Third</a></li> 
      </ul> 
      <div id="tabs-4">Data from contentPg Tab1</div> 
      <div id="tabs-5">Data from contentPg Tab2</div> 
      <div id="tabs-6">Data from contentPg Tab3</div> 
     </div> 
      <script type="text/javascript" src="external/jquery/jquery.js"></script> 
    <script type="text/javascript" src="js/jquery-ui.js"></script> 
     <script> 
      $(document).ready(function() { 
       //alert("Hi from JS"); 
      }); 

      $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); 
      $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); 

    </script> 
    <asp:Button ID="btn1" runat="server" OnClick="Button1_Click" style="height: 26px" Text="Button" /> 
</asp:Content> 

Вот результат, который я получаю на веб-странице.

Answer 1

Это потому, что у вас есть идентификатор в главной странице под названием «Вкладка» и тот же идентификатор используются на страницах контента (у вас есть «вкладка») там. Идентификатор должен быть уникальным.

Я бы предложил переключиться на использование классов; класс = «Вкладки», а не чем ид, то ваш код может переключиться на использование

$(".tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); 

и будет применяться ко всем вкладкам (в том числе и на страницах контента)