我有一些典型的标签内容,我真的需要一些帮助.我想实现,当用户尝试通过外部锚链接(
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');
});
