Jquery無法在內容頁面上工作

是否有可能在內容頁面中使用JQuery UI具有選項卡式佈局？我在母版頁中有選項卡式佈局，當我試圖在內容頁中添加另一個選項卡式佈局時，JQuery被忽略。Jquery無法在內容頁面上工作

或者我如何在內容頁面上使用Jquery UI？假設我在內容頁面上有按鈕，並希望從css文件獲得UI效果。那可能嗎？有人可以給我同樣的示例嗎？

任何幫助真的很感激。

這裏是主頁面的代碼，它的工作正常。

標題部分包含指向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>

這是我在網頁上看到的輸出。

enter image description here

來源

2015-02-10 atp9

那麼它的一旦裝入，可用於任何地方。你也可以發佈一些你已經嘗試的，否則你不會從社區獲得很多幫助，因爲他們贏了;不知道你的問題是什麼 – 2015-02-10 11:02:13

請看看編輯過的代碼。不知何故，我沒有得到內容頁面上的標籤式佈局，只是將數據放在顯示屏上，而不是渲染爲標籤式佈局。我相信我在這裏失去了一些東西，但我無法找到它。 – atp9 2015-02-10 11:14:29

我只是試圖創建一個簡單的網站，一個主頁和3-4個內容頁面。 – atp9 2015-02-10 11:17:22

那是因爲你有所謂的「標籤」母版頁的ID和相同的ID在內容頁中使用（你有「標籤」），也有。 Id必須是唯一的。

我建議切換到使用類;類=「標籤」，而不是比ID，然後在你的代碼可以切換到使用

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

。如果jQuery是包含在你的項目中，將適用於所有選項卡（包括那些內容頁）

來源

2015-02-10 11:41:23

謝謝。我只是試過，它的工作！ – atp9 2015-02-10 13:09:14

Jquery無法在內容頁面上工作

回答

相關問題