我有一些工作正常的标签,并且正在添加一个“活跃的”标签。点击时的课程。我希望标签内容中的文本链接相互链接。我有这个工作,但我无法找到一种让其标签处于活动状态的方法:
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();
});
});
答案 0 :(得分:2)
替换
$(this).parent('li').addClass('active').siblings().removeClass('active');
使用
$('a[href='+currentAttrValue+']').parent('li').addClass('active').siblings().removeClass('active');