我有以下代码
在我创建自己的网站的过程中效果很好,没有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'); }
我猜您的网站在href方面遇到了问题,我认为当用户单击href时,网站会自动消除自身。
我为您提供了一个新的解决方案:
更新的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>