通过导航激活选项卡并将 class 添加到单击的导航按钮

Question

我有一个导航栏，可以选择页面上的各个选项卡，因此如果用户单击导航栏中的第一个选项卡，它将打开页面并激活相应的选项卡。页面上的选项卡选择工作正常 - 单击选项卡和内容显示，同时更改该选项卡的突出显示。问题是使用导航栏时它会更改内容但不会更改突出显示，也不会将 class 添加到导航按钮。任何帮助将不胜感激，我已经为此纠结太久了。

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

看起来您的选择器与 .tab-links 块中的任何 li 元素都不匹配，您要在该块中更改类.

删除这个：

$(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

您已经有 'tab-links class' 的有效点击事件。您可以只绑定下拉列表来触发选项卡链接相关的点击事件。

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

通过导航激活选项卡并将 class 添加到单击的导航按钮

Activating tabs via navigation and adding class to navigation button clicked

html

jquery

tabs