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的标签显示不正确

回答

相关问题