提问人：Mr Beh 提问时间：10/13/2021 最后编辑：Rory McCrossanMr Beh 更新时间：10/13/2021 访问量：29
链接到包含选项卡式内容的页面不起作用
link to a page with tabbed content doesnt work
问：
我一直在尝试使用直接链接，以便每当单击该链接时，都会打开特定选项卡。但是，当我使用选项卡名称时，不会打开我想要的特定选项卡。domainname.com/aboutus#award_tab
选项卡中的所有内容都已获得下面提到的部分 ID。这是我使用的代码：
if (jQuery(".effect-1 span:first-child").hasClass("active")) {
//alert('first');
jQuery('#deo_tab').show();
jQuery('#sustainablity_tab').hide();
jQuery('#award_tab').hide();
} else if (jQuery(".effect-1 span::nth-child(2)").hasClass("active")) {
//alert('mid');
jQuery('#deo_tab').hide();
jQuery('#sustainablity_tab').show();
jQuery('#award_tab').hide();
} else if (jQuery(".effect-1 span:last-child").hasClass("active")) {
//alert('last');
jQuery('#deo_tab').hide();
jQuery('#sustainablity_tab').hide();
jQuery('#award_tab').show();
}
答：
0赞
Navin Solanki
10/13/2021
#1
$(".tab a").click(function(){
var tab= $(this).data('tab');
$(".content").addClass("dnone");
$("#"+tab).removeClass("dnone");
});.tab{
display:flex;
}
.tab>a{
padding:10px
}
.dnone{display:none}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
<a href="#content1" class="tabs tab1" data-tab="content1">tab1</a>
<a href="#content2" class="tabs tab2" data-tab="content2">tab2</a>
<a href="#content3" class="tabs tab3" data-tab="content3">tab3</a>
</div>
<div class="contents">
<div id="content1" class="content">content1</div>
<div id="content2" class="content dnone">content2</div>
<div id="content3" class="content dnone">content3</div>
</div>
<!- try this i hope it work for you->
评论