带有锚链接的打开选项卡 [英] Opening tab with anchor link
问题描述
我有一些典型的标签内容,我确实需要一些帮助.我想达到的目的是,当用户尝试通过外部锚点链接( http://www. url.com#content2 ),导航链接被激活并显示正确的标签.
I have some typical tab content and I really need some help. I would like to achieve, that when user tries to get to a specific tab via external anchor link (http://www.url.com#content2), the navigation link becomes activated and the correct tab is shown.
谢谢您的帮助.
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
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;
});
});
我有一个实时示例此处 因此,如果单击导航,一切正常,但是如果要转到特定标签kajag.com/themes/book_your_travel/location.html#sports_and_nature,则不会打开正确的标签.
I have a live example here So, if you click on the navigation, everything works ok, but if you want to go to a specific tab kajag.com/themes/book_your_travel/location.html#sports_and_nature the correct tab does not open.
推荐答案
您可以通过以下方法解决此问题:在页面加载时简单地检查哈希值,然后触发右选项卡上的单击,就像这样:
You could solve this by simply checking the hash when the page loads, and then trigger a click on the right tab, like so:
$(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');
});
这篇关于带有锚链接的打开选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!