我有一些标签设置;这是他们目前的工作:
问题:当用户点击其中一个标签并显示内容,然后点击其他标签时,两组内容都会显示(如累计切换)。
我想进行设置,以便在用户点击标签并显示内容,然后点击其他标签时,点击的第一个标签显示的内容将隐藏。
这是另一个涉及类似问题的SO问题,但它不包括我有的活动类代码 - Dealing with multiple toggles和有效的JS - http://jsfiddle.net/jHvjD/5/
JQUERY
$(document).ready(function(){
$('.tab_contents').hide();
$('.tab').click(function() {
$(this.rel).toggle();
$('#tabs_container > .tabs > li.active')
.removeClass('active');
$(this).parent().addClass('active');
$('#tabs_container > .tab_contents_container > div.tab_contents_active')
.removeClass('tab_contents_active');
$(this.rel).addClass('tab_contents_active');
});
});
HTML
<div id="tabs_container">
<!-- These are the tabs -->
<ul class="tabs">
<li>
<a href="#" rel="#tab_1_contents" class="tab">Option 1</a>
</li>
<li><a href="#" rel="#tab_2_contents" class="tab">Option 2</a></li>
</ul>
<div class="clear"></div>
<div class="tab_contents_container">
<!-- Tab 1 Contents -->
<div id="tab_1_contents" class="tab_contents tab_contents_active">Option 1 stuff </div>
<!-- Tab 2 Contents -->
<div id="tab_2_contents" class="tab_contents">Option 2 stuff</div>
</div>
答案 0 :(得分:4)
$('.tab_contents').hide();
$('.tab').click(function(){
var target = $(this.rel);
$('.tab_contents').not(target).hide();
target.toggle();
$('#tabs_container > .tabs > li.active')
.removeClass('active');
$(this).parent().addClass('active');
$('#tabs_container > .tab_contents_container > div.tab_contents_active')
.removeClass('tab_contents_active');
$(this.rel).addClass('tab_contents_active');
});
答案 1 :(得分:0)
为什么如此复杂 - 首先尝试简单:
$('.tab_contents_active')
.removeClass('tab_contents_active');
而不是
$('#tabs_container > .tab_contents_container > div.tab_contents_active')
.removeClass('tab_contents_active');
如果可行(它会),那么你可以进行优化。
我怀疑第一个代码没有优化,除非你的页面非常复杂,额外的选择会让它变慢......但它真的取决于你的dom ...试试简单的&#34;删除所有&#34;解决方案首先。
答案 2 :(得分:0)
你可以试试这个更简单。
$(document).ready(function(){
$('.tab_contents').hide();
$('.tab').click(function() {
var activeTabContent = $(this).attr('rel');
$('#tab_contents').not(activeTabContent).hide()
.removeClass('tab_contents_active');
$(activeTabContent).toggle().addClass('tab_contents_active');
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
答案 3 :(得分:0)
执行$('.tab_contents_active').toggle();
。
这样他们就会在新标签向下滑动之前向上滑动。