Активация jquery tabber на основе щелкнутой ссылки навигации

Question

На моем веб-сайте есть навигационная система с идентификатором #nav. Я хочу активировать tabber на основе списка навигации по клику. Навигационная #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> 

когда Фред щелкнул из навигации, я хочу, чтобы активировать это на Tabber, который имеет HTML, как этот

<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. Я видел предыдущие примеры на этом сайте, которые не работают, когда я пытаюсь использовать. Так может кто-то адаптировать мой код/​​помочь мне, пожалуйста?

Answer 1

Ваш jquery не проблема - это ваш HTML. Вы используете location.hash в функции click, но ваш 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>