jQuery的標籤顯示不正確

我有標籤的正常工作自定義JavaScript代碼，但是我試圖把孩子選項卡中，所示：jQuery的標籤顯示不正確

<div id="tabs" style="position:relative; "> 
      <ul id="nav"> 
       <li><a href="#prizes">Prizes</a></li> 
       <li><a href="#basket">Your sack</a></li> 
       <li><a href="#order-history">Order History</a></li> 
      </ul> 

      <div id="tab-prizes" class="tab"> 
       <?php include('prizes.php');?> 
      </div>

然後內prizes.php文件：

<div id="tabsprizes" style="position:relative; "> 
      <ul id="nav1"> 
       <li><a href="#branded">Weber Branded</a></li> 
       <li><a href="#for-him">For Him</a></li> 
      </ul> 

      <div id="tab-branded" class="tab"> 

       <?php echo "fgdsd"; ?> 

      </div>

我喜歡它，所以他們去了獎品標籤，例如，在那裏有另一組標籤，他們只能在該頁面中使用。當時點擊子標籤時，所有的內容消失。這裏是我的JS：

$("#parenttabs #nav a").click(function() { //Parent Tabs Click Function 
    var hash = this.getAttribute("href"); 
    if (hash.substring(0, 1) === "#") { 
     hash = hash.substring(1); 
    } 

    location.hash = hash; 
    showTab(hash); 

    return false; 
}); 

function showTab(hash) { 
    $("div.tab").hide(); 
    $("#tab-" + hash).fadeIn(); 
}

對不起，所有的代碼，不知道到底要顯示什麼：/

感謝

來源

2012-02-29 JamesG

如果你能重現[這裏]（http://jsfiddle.net/），這將是非常有益的。 – Andrew 2012-02-29 17:30:23

考慮看看JQuery UI tabs documentation，我看沒有引用選項卡，在選項卡功能。當然，假設您使用的是JQuery UI。

Here's an example JQuery UI嵌套選項卡的標記。研究它，你可能會發現你的代碼不能按預期工作。

我建議你看看JQuery tools，因爲它確實公開支持tab-in-tab功能。

Here's an example JQuery工具嵌套選項卡標記和腳本。

來源

2012-02-29 17:37:20 ShadowScripter

你是Jquery UI嵌套標籤標記的例子，它不能正常工作...... – 2013-09-29 01:32:33

@Pispirulito這是因爲他們已經從JQuery中刪除了瀏覽器檢測，因爲這個示例已經生成。控制檯正在生成'Can not read property'msie'undefined'錯誤。你可以使用[jquery-migrate]（https://github.com/jquery/jquery-migrate/）修復它，或者只是獲取最新的jquery-ui庫。我會更新我的答案。 – ShadowScripter 2013-09-29 14:33:15

如果您使用的是jQuery UI，那麼嵌套選項卡應該沒有問題。只要確保元素使用獨特的ID

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">First Tab</a></li> 
     <li><a href="#tabs-2">Second Tab</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Nothing to show..</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Tabs in tab!</p> 
     <div id="more-tabs"> 
      <ul> 
       <li><a href="#nested-tabs-1">Child Tab 1</a></li> 
       <li><a href="#nested-tabs-2">Child Tab 2</a></li> 
      </ul> 
      <div id="nested-tabs-1"><p>Content here...</p></div> 
      <div id="nested-tabs-2"><p>More content here...</p></div> 
     </div> 
    </div> 
</div>

jsFiddle example

來源

2013-03-20 12:41:03 Patric

jQuery的標籤顯示不正確

回答

相關問題