大佬教程收集整理的这篇文章主要介绍了javascript – 如何使用jQuery构建简单的选项卡？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这在我自己创建的网站中非常有效,而且没有JS,标签充当相关部分的跳转链接.当放置在定制的CMS中时,我被迫使用此时跳转链接不起作用.我已经尝试添加更多相关链接到选项卡,这使得它没有JS工作,但使用JS标签内容不显示.
我错过了什么吗？
HTML：
<ul id="tabs">
<li><a href="#tab1">test1</a></li>
<li><a href="#tab2">test2</a></li>
<li><a href="#tab3">test3</a></li>
<li><a href="#tab4">test4</a></li>
</ul>
<div class="container" id="tab1">Some content</div>
<div class="container" id="tab2">Some content</div>
<div class="container" id="tab3">Some content</div>
<div class="container" id="tab4">Some content</div>
jQuery的：
$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function(){
var t = $(this).attr('href');
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$(t).fadeIn('slow');
return false;
})
if($(this).hasClass('inactive')){ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$(t).fadeIn('slow');
}
Here is new solution’s jsFiddle.
更新的jQuery：
$('#tabs li a').click(function(){
var t = $(this).attr('id');
if($(this).hasClass('inactive')){ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$('#'+ t + 'C').fadeIn('slow');
}
});
新的HTML标记：
<ul id="tabs">
<li><a id="tab1">test1</a></li>
<li><a id="tab2">test2</a></li>
<li><a id="tab3">test3</a></li>
<li><a id="tab4">test4</a></li>
</ul>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>
以上是大佬教程为你收集整理的javascript – 如何使用jQuery构建简单的选项卡？全部内容，希望文章能够帮你解决javascript – 如何使用jQuery构建简单的选项卡？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。