gpt4 book ai didi

jquery - 打开带有 anchor 链接的选项卡

转载 作者:行者123 更新时间:2023-12-03 22:09:22 24 4
gpt4 key购买 nike

我有一些典型的选项卡内容,我确实需要一些帮助。我希望实现,当用户尝试通过外部 anchor 链接( http://www.url.com#content2 )访问特定选项卡时,导航链接将被激活并显示正确的选项卡。

感谢您的帮助。

HTML

<nav class="inner-nav">
<ul>
<li><a href="#content1">Inner nav navigation link1</a></li>
<li><a href="#content2">Inner nav navigation link2</a></li>
<li><a href="#content3">Inner nav navigation link3</a></li>
</ul>
</nav>

<section class="tab-content" id="content1">
<article>
content1 goes here
</article>
</section>

<section class="tab-content" id="content2">
<article>
content2 goes here
</article>
</section>

<section class="tab-content" id="content3">
<article>
content3 goes here
</article>
</section>

JavaScript

$(document).ready(function () {
$(".tab-content").hide();
$(".tab-content:first").show();
$(".inner-nav li:first").addClass("active");

$(".inner-nav a").click(function(){
$(".inner-nav li").removeClass("active");
$(this).parent().addClass("active");
var currentTab = $(this).attr("href");
$(".tab-content").hide();
$(currentTab).show();
return false;
});
});

我有一个活生生的例子here因此,如果您单击导航,一切正常,但如果您想转到特定选项卡 kajag.com/themes/book_your_travel/location.html#sports_and_nature,则不会打开正确的选项卡。

最佳答案

您可以通过在页面加载时检查哈希值来解决此问题,然后触发右侧选项卡上的单击,如下所示:

$(function () {
$(".tab-content").hide().first().show();
$(".inner-nav li:first").addClass("active");

$(".inner-nav a").on('click', function (e) {
e.preventDefault();
$(this).closest('li').addClass("active").siblings().removeClass("active");
$($(this).attr('href')).show().siblings('.tab-content').hide();
});

var hash = $.trim( window.location.hash );

if (hash) $('.inner-nav a[href$="'+hash+'"]').trigger('click');

});

关于jquery - 打开带有 anchor 链接的选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15678511/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com