0

我的网站有一个带有 id 的导航#nav。我想根据单击的导航列表激活选项卡。导航#nav有一个像这样的html： -

 <ul id ="nav">
    <li><a href="#tab1">Fred</a></li>
    <li><a href="#tab2">Thom</a></li>
    <li><a href="#tab3">Kay</a></li>
</ul>

当从导航中单击 Fred 时，我想在具有这样的 html 的 tabber 上激活它

 <ul class="tabs">                                        
         <li><a href="#tab1">Fred</a></li>                                      
         <li><a href="#tab2">Thom</a></li>    
         <li><a href="#tab3">Kay</a></li>       
</ul>

和标签内容是这样的： -

<div id="tab1" class="tab_content">Lorem</div>
<div id="tab2" class="tab_content">Ipsum</div>
<div id="tab3" class="tab_content">Dolor</div>

所以我写了下面这行jquery

$("#nav li").click(function() {

         var hash = location.hash;
          var sel = $("ul.tabs li a[href='" + hash + "'], ul#tabs li a[href='" + hash + "']");

    if (sel.length) { 

        sel.addClass("active").parent().addClass("active"); //Activate tab



        $(hash).show();
    }

它不起作用！以及如何将 onclick 事件绑定到它？对不起，我对 jquery 很陌生。我在这个网站上看到过以前的例子，当我尝试使用时它不起作用。那么有人可以修改我的代码/帮助我吗？

4

1 回答 1

1

您的 jquery 不是问题 - 它是您的 HTML。您在 click 函数中使用 location.hash ，但您的 nav ul 实际上并没有哈希值。尝试改变这个：

<ul id ="nav">
    <li><a href="tab1">Fred</a></li>
    <li><a href="tab2">Thom</a></li>
    <li><a href="tab3">Kay</a></li>
</ul>

对此：

<ul id ="nav">
    <li><a href="#tab1">Fred</a></li>
    <li><a href="#tab2">Thom</a></li>
    <li><a href="#tab3">Kay</a></li>
</ul>
于 2013-04-23T20:51:23.683 回答