拆分标签 headers 未删除活动状态
Split tab headers not removing active state
我正在尝试使用 jquery、css 和 html 为我的网站创建标签系统,当标签 headers合并但是我想拆分它们,所以一些选项卡 headers 在页面的一侧,其余的在页面的另一侧。一切看起来都很好,当我单击选项卡 headers 时,选项卡发生了变化,但是 headers 没有删除前一个选项卡上的活动状态,这一定是因为我拆分了它们。
Jquery:
jQuery(document).ready(function() {
jQuery('.tabs .tab-links-left a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
//My added code
jQuery('.tabs .tab-links-right').siblings().removeClass('active');
e.preventDefault();
});
});
jQuery(document).ready(function() {
jQuery('.tabs .tab-links-right a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
//My added code
jQuery('.tabs .tab-links-left li').siblings().removeClass('active');
e.preventDefault();
});
});
这里是html headers
<ul class="tab-links-left" >
<li class="active"><a href="#tab1">Home</a></li>
<li><a href="#tab2">Gallery</a></li>
<li><a href="#tab3">Services</a></li>
</ul>
<ul class="tab-links-right" >
<li><a href="#tab4">Testimonials</a></li>
<li><a href="#tab5">Contact</a></li>
</ul>
你的问题是对面的标签没有
.siblings()
另一边。
我建议您给所有选项卡一个 class
<li class="tab">
然后在单击选项卡时只需执行以下操作:
jQuery('.tab').removeClass('active'); //Remove the active state from all tabs
jQuery(this).parent('li').addClass('active'); //Add the active state to the clicked tab
我正在尝试使用 jquery、css 和 html 为我的网站创建标签系统,当标签 headers合并但是我想拆分它们,所以一些选项卡 headers 在页面的一侧,其余的在页面的另一侧。一切看起来都很好,当我单击选项卡 headers 时,选项卡发生了变化,但是 headers 没有删除前一个选项卡上的活动状态,这一定是因为我拆分了它们。
Jquery:
jQuery(document).ready(function() {
jQuery('.tabs .tab-links-left a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
//My added code
jQuery('.tabs .tab-links-right').siblings().removeClass('active');
e.preventDefault();
});
});
jQuery(document).ready(function() {
jQuery('.tabs .tab-links-right a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
//My added code
jQuery('.tabs .tab-links-left li').siblings().removeClass('active');
e.preventDefault();
});
});
这里是html headers
<ul class="tab-links-left" >
<li class="active"><a href="#tab1">Home</a></li>
<li><a href="#tab2">Gallery</a></li>
<li><a href="#tab3">Services</a></li>
</ul>
<ul class="tab-links-right" >
<li><a href="#tab4">Testimonials</a></li>
<li><a href="#tab5">Contact</a></li>
</ul>
你的问题是对面的标签没有
.siblings()
另一边。
我建议您给所有选项卡一个 class
<li class="tab">
然后在单击选项卡时只需执行以下操作:
jQuery('.tab').removeClass('active'); //Remove the active state from all tabs
jQuery(this).parent('li').addClass('active'); //Add the active state to the clicked tab