[英]Multitabs jquery: how do I show first element in each subtab?
I'm trying to use nested tabs ( like here: JSFIDDLE ) on a page but I have a problem, I can't figure out how to show the first sub-tab and hide the others when I select a tab. 我正在尝试在页面上使用嵌套选项卡(例如: JSFIDDLE ),但是我有一个问题,当我选择一个选项卡时,我不知道如何显示第一个子选项卡并隐藏其他子选项卡。 Thanks in advance. 提前致谢。
My code: 我的代码:
jQuery(function(){
jQuery('.nav-tab').click(function(){
jQuery('.tabs').hide();
jQuery('#tab-'+$(this).attr('target')).fadeIn(350);
});
jQuery('.sub-nav').click(function(){
jQuery('.sub-tab').hide();
jQuery('#sub'+$(this).attr('target')).fadeIn(350);
});
}); });
HTML code: HTML代码:
<ul id="nav-box">
<li><a class="nav-tab" target="1">tab1</a></li>
<li><a class="nav-tab" target="2">tab2</a></li>
<li><a class="nav-tab" target="3">tab3</a></li>
</ul>
<div class="tabs" id="tab-1">
<div class="left-col">
<ul class="sub-list">
<li><a class="sub-nav" target="tab1">subnav1</a></li>
<li><a class="sub-nav" target="tab2">subnav2</a></li>
<li><a class="sub-nav" target="tab3">subnav3</a></li>
</ul>
</div>
<div class="sub-tab" id="subtab1">sub tab 1</div>
<div class="sub-tab" id="subtab2">sub tab 2</div>
<div class="sub-tab" id="subtab3">sub tab 3</div>
</div>
<div class="tabs" id="tab-2">
<div class="left-col">
<ul class="sub-list">
<li><a class="sub-nav" target="tab4">subnav4</a></li>
<li><a class="sub-nav" target="tab5">subnav5</a></li>
<li><a class="sub-nav" target="tab6">subnav6</a></li>
</ul>
</div>
<div class="sub-tab" id="subtab4">sub tab 4</div>
<div class="sub-tab" id="subtab5">sub tab 5</div>
<div class="sub-tab" id="subtab6">sub tab 6</div>
</div>
<div class="tabs" id="tab-3">
<div class="left-col">
<ul class="sub-list">
<li><a class="sub-nav" target="tab7">subnav7</a></li>
<li><a class="sub-nav" target="tab8">subnav8</a></li>
<li><a class="sub-nav" target="tab9">subnav9</a></li>
</ul>
</div>
<div class="sub-tab" id="subtab7">sub tab 7</div>
<div class="sub-tab" id="subtab8">sub tab 8</div>
<div class="sub-tab" id="subtab9">sub tab 9</div>
</div>
and styles: 和样式:
#nav-box li {display:inline;list-style-type:none;}
.nav-tab,.sub-nav {cursor:pointer;margin:0 20px;}
.tabs {display:none;}
.left-col {float:left;}
.sub-tab {position:relative;top:10px;left:40px;z-index:-1;}
This should do it for you. 这应该为您做。 You simply hide all the .sub-tab
elements within the selected tab, then show the first. 您只需将所有.sub-tab
元素隐藏在所选选项卡中,然后显示第一个即可。
jQuery('.nav-tab').click(function(){
jQuery('.tabs').hide();
var $targetTab = jQuery('#tab-'+$(this).attr('target'));
$targetTab.find('.sub-tab').hide().first().show();
$targetTab.fadeIn(350);
});
Here is revised fiddle http://jsfiddle.net/6yQ8k/40/ 这是修订的小提琴http://jsfiddle.net/6yQ8k/40/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.