激活标签通过导航和添加类到导航按钮点击

Question

我有一个导航栏，选择单独的页面在页面上，所以如果用户点击导航栏中的标签之一，它会打开页面，并激活相应的选项卡。在页面上的标签选择工作正常 - 点击标签和内容显示，同时更改该标签的突出显示。问题是使用导航栏时，它会更改内容，但不会更改高亮显示，也不会将类添加到导航按钮。任何帮助将不胜感激，现在我已经把我的头发拉长了很久。

代码在这里的jsfiddle - http://jsfiddle.net/thyt6gff/1/ 的jQuery：

$(document).ready(function() { 

$('#menu li ul a').on('click', function(e) { 

    var currentAttrValue = jQuery(this).attr('href'); 

    // Show/Hide Tabs 
    $('.tabs ' + currentAttrValue).show().siblings().hide(); 

    // Change/remove current tab to active 
    //this is not working 
    $(this).parent('li').addClass('active').siblings().removeClass('active'); 

    //Change the class for navigation bar 
    //this is not working 
    $('#menu li ul a ' + currentAttrValue).addClass('current') 

    e.preventDefault(); 
}); 


$('.tabs .tab-links a').on('click', function(e) { 
    var currentAttrValue = jQuery(this).attr('href'); 

    // Show/Hide Tabs 
    $('.tabs ' + currentAttrValue).show().siblings().hide(); 


    // Change/remove current tab to active 
    $(this).parent('li').addClass('active').siblings().removeClass('active'); 

    e.preventDefault(); 
}); 


}); 

HTML：

<div id="header"> 
<ul id="menu"> 
<li><a href="index.html">Home</a></li> 
<li> 
<a href="#" class="current">test page</a> 
<ul> 
<li><a href="test.html" class="current">Overview</a></li> 
<li><a href="#tab1">tab 1</a></li> 
<li><a href="#tab2">tab 2</a></li> 
<li><a href="#tab3">tab 3</a></li> 
</ul> 
</li> 
<li><a href="contact.html">Contact</a></li> 
</ul> 
</div> 

<div class="content"> 
<section class="multilevel"> 

<br> 
<!-----tabs----->  
<div class="tabs"> 
<ul class="tab-links"> 
<li><a href="#tab1">tab 1</a></li> 
<li><a href="#tab2">tab 2</a></li> 
<li><a href="#tab3">tab 3</a></li> 
</ul> 
<div class="tab-content"> 
<div id="tab1" class="tab active"> 
<h2>tab 1</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur malesuada egestas. Ut laoreet hendrerit mi et interdum. Mauris et pellentesque eros, hendrerit vehicula dolor. Aliquam euismod at lectus non malesuada. Proin in luctus purus. Sed dictum leo vitae est gravida consequat.</p> 
</div> 
<div id="tab2" class="tab"> 
<h2>tab 2</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur malesuada egestas. Ut laoreet hendrerit mi et interdum. Mauris et pellentesque eros, hendrerit vehicula dolor. .</p> 
<p>Aenean sit amet hendrerit ex, a viverra nisi. Vivamus augue neque, sollicitudin eget sem non, commodo cursus orci. Ut facilisis justo nec sapien aliquam, non malesuada tortor congue.</p> 
</div> 
<div id="tab3" class="tab"> 
<h2>tab 3</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur malesuada egestas. Ut laoreet hendrerit mi et interdum. Mauris et pellentesque eros, hendrerit vehicula dolor.</p> 
<p>Aenean sit amet hendrerit ex, a viverra nisi. Vivamus augue neque, sollicitudin eget sem non, commodo cursus orci. Ut facilisis justo nec sapien aliquam, non malesuada tortor congue. Vivamus mollis accumsan maximus. </p> 
<p>Integer velit lacus, placerat sit amet ornare sit amet, mattis non mi. Nulla faucibus tristique lectus id semper. Pellentesque porta libero a tempus pretium. Integer non ex at urna convallis accumsan eu id dui.</p> 
</div> 
</div> 
</div> 
<!----/tabs-----> 
</section> 
</div> 

Answer 1

Working Fiddle

它看起来像你的选择是不匹配的任何li元素.tab-links块，这是你想要改变你的课程。

删除这样：

$(this).parent('li').addClass('active').siblings().removeClass('active'); 
$('#menu li ul a ' + currentAttrValue).addClass('current'); 

替换此：

$('.tabs .tab-links li').removeClass('active'); 
$('.tab-links a[href$="' + currentAttrValue + '"]').parent().addClass('active'); 

Answer 2

您已经为“标签链接类的工作click事件。你可以绑定下拉列表来触发tab-links相关的点击事件。

HTML

  <ul class="symbolic"> 
       <li><a href="test.html" class="current">Overview</a></li> 
       <li><a href="#tab1">tab 1</a></li> 
       <li><a href="#tab2">tab 2</a></li> 
       <li><a href="#tab3">tab 3</a></li> 
      </ul> 

JS

$(document).ready(function() { 

$('.tabs .tab-links a').on('click', function(e) { 
    var currentAttrValue = jQuery(this).attr('href'); 
    // Show/Hide Tabs 
    $('.tabs ' + currentAttrValue).show().siblings().hide(); 
    // Change/remove current tab to active 
    $(this).parent('li').addClass('active').siblings().removeClass('active'); 
    e.preventDefault(); 
}); 

$('ul.symbolic li a').click(function(){ 
    var tabId = $(this).attr('href'); 
    $('.tabs .tab-links a[href='+tabId+']').trigger('click'); 
}); 

// Trigger Initial Click of tab 1 on page load 
$('.tabs .tab-links a[href=#tab1]').trigger('click'); 

}); 

这种方式，您甚至可以通过点击TAB1在页面加载！ Working Jsfiddle