Question

我有一个导航栏，其中包含页面上各个选项卡的选项，因此，如果用户单击导航栏中的选项卡1，它将打开页面并激活相应的选项卡。页面上的选项卡选择工作正常 - 单击选项卡和内容显示，同时更改该选项卡的突出显示。问题是当使用导航栏时它会更改内容但不会更改突出显示，也不会将类添加到导航按钮。任何帮助都会非常感激，我已经把头发拉了很长时间了。

这里的代码在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

您已经为'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

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

2 个答案: