Jquery链接到另一个选项卡

时间:2014-11-19 15:31:46

标签: jquery tabs

我有一些工作正常的标签,并且正在添加一个“活跃的”标签。点击时的课程。我希望标签内容中的文本链接相互链接。我有这个工作,但我无法找到一种让其标签处于活动状态的方法:

JSFiddle:http://jsfiddle.net/sarah3585/01vas55s/

所以这里我想在tab1中点击它的链接时将活动类应用于tab2。

HTML:

<div class="tabs">
        <div class="selection">
        <ul class="tab-links">
            <li class="active"><a class="tab-link button" href="#tab1">Button1</a></li>
            <li><a class="tab-link button" href="#tab2">Button 2</a></li>
        </ul>
    </div>

  <div class="internal-container tab-content">

    <div id="tab1" class="tab active"> 
        Tab 1 content
        <a href="#tab2" class="tab-link">Link to tab2</a>
    </div>

    <div id="tab2" class="tab"> 
        Tab 2 content
    </div>

  </div>
</div>

JS:

$(document).ready(function() {
$('a.tab-link').on('click', function(e)  {
    var currentAttrValue = $(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();
});
});

1 个答案:

答案 0 :(得分:2)

替换

$(this).parent('li').addClass('active').siblings().removeClass('active');

使用

$('a[href='+currentAttrValue+']').parent('li').addClass('active').siblings().removeClass('active');