jQuery 带有锚链接的打开选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15678511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Opening tab with anchor link
提问by Ajak Glisic
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.
我有一些典型的标签内容，我真的需要一些帮助。我想实现的是，当用户尝试通过外部锚链接（http://www.url.com#content2）访问特定选项卡时，导航链接将被激活并显示正确的选项卡。
Thank you for your help.
感谢您的帮助。
HTML
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;
});
});
I have a live example hereSo, 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.
我在这里有一个活生生的例子 所以，如果你点击导航，一切正常，但如果你想转到特定的标签 kajag.com/themes/book_your_travel/location.html#sports_and_nature 正确的标签不会打开。
回答by adeneo
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');
});
回答by David Gilbertson
I've just finished something similar here (disclosure, my site): http://kronia.com.au/#showcase
我刚刚在这里完成了类似的事情（披露，我的网站）：http: //kronia.com.au/#showcase
Since you're not using the hash directly (i.e. the page shouldn't scroll to a div, it should hide/show a tab depending on the value) you need to check first for a hash (there may not be a hash in the link).
由于您没有直接使用散列（即页面不应滚动到 div，它应该根据值隐藏/显示选项卡）您需要先检查散列（可能没有散列在关联）。
if (window.location.hash){
someFunction();
}
Then show/hide tabs based on the value of the hash. If you're performing some transition, then define a 'from' and 'to' tab, otherwise just the tab that should be shown. E.g.:
然后根据哈希值显示/隐藏选项卡。如果您正在执行一些转换，则定义一个“从”和“到”选项卡，否则只定义应该显示的选项卡。例如：
function someFunction(_to, _from){
_to.removeClass('kr-dormant').addClass('kr-next');
_from.removeClass('kr-current').addClass('kr-dormant');
_to.removeClass('kr-next').addClass('kr-current');
}
回答by Guilherme de Jesus Santos
This is the exactly behavior that you will have if you use JQuery UI Tabswidget
如果您使用JQuery UI Tabs小部件，这正是您将拥有的行为
See these examples :
请参阅这些示例：
To default tab : https://jqueryui.com/resources/demos/tabs/default.html
To second tab : https://jqueryui.com/resources/demos/tabs/default.html#tabs-2
To third tab : https://jqueryui.com/resources/demos/tabs/default.html#tabs-3
默认选项卡：https: //jqueryui.com/resources/demos/tabs/default.html
到第二个标签：https: //jqueryui.com/resources/demos/tabs/default.html#tabs-2
到第三个标签：https: //jqueryui.com/resources/demos/tabs/default.html#tabs-3
The example code of implementation :
实现示例代码：
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
