javascript jQuery 选项卡：如何创建指向特定选项卡的链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3601035/
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
jQuery tabs: how to create a link to a specific tab?
提问by klavina
I'm using a simple jQuery script for tabs:
我正在为选项卡使用一个简单的 jQuery 脚本：
The JS:
JS：
$(document).ready(function() {
$(".tab-content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab-content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab-content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).show();
return false;
});
});
The HTML (for the index.html):
HTML（用于 index.html）：
<div id="tabs">
<ul class="tabs">
<li><a href="#tabs-voters">Top Voters</a></li>
<li><a href="#tabs-commenters">Top Commenters</a></li>
</ul>
<div id="tabs-voters" class="tab-content">
<p id="h1-01">Tab content</p>
<p>Some content</p>
</div>
<div id="tabs-commenters" class="tab-content">
<h2 id="h-02">Tab content</h2>
<p>Some content</p>
<h2 id="h-03">Tab content</h2>
<p>Some content</p>
</div>
</div>
What I need to do is to create a working link to index.html#h-02, index.html#h-03etc., but these simple links don't work because the tab is hidden by default. Is it possible to modify the JS, so I can link to a bookmark in tabs that are hidden when opening index.html? Can someone point me in the right direction?
我需要做的是创建一个指向index.html#h-02、index.html#h-03等的工作链接，但这些简单的链接不起作用，因为默认情况下该选项卡是隐藏的。是否可以修改 JS，以便我可以链接到打开 index.html 时隐藏的选项卡中的书签？有人可以指出我正确的方向吗？
Thanks a lot! :)
非常感谢！:)
回答by Matt Ball
In your document ready handler, you can examine the value of the fragment and use JavaScript to show the corresponding tab.
在您的文档就绪处理程序中，您可以检查片段的值并使用 JavaScript 显示相应的选项卡。
$(document).ready(function () {
...
var tabId = window.location.hash; // will look something like "#h-02"
$(tabId).click(); // after you've bound your click listener
});
Editas requested:
按要求编辑：
$(document).ready(function() {
$(".tab-content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab-content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab-content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).show();
return false;
});
$(window.location.hash).click(); // super-simple, no? :)
});?
Edit 2:
编辑2：
If you want to be able to specify an ID of a tab content element (like h-02in the page you linked) then you have to work backwards to get the ID of the corresponding tab to activate it. Like this:
如果您希望能够指定选项卡内容元素的 ID（例如h-02在您链接的页面中），那么您必须向后工作以获取相应选项卡的 ID 以激活它。像这样：
$(document).ready(function() {
var $tabContent = $(".tab-content"),
$tabs = $("ul.tabs li"),
tabId;
$tabContent.hide();
$("ul.tabs li:first").addClass("active").show();
$tabContent.first().show();
$tabs.click(function() {
var $this = $(this);
$tabs.removeClass("active");
$this.addClass("active");
$tabContent.hide();
var activeTab = $this.find("a").attr("href");
$(activeTab).show();
return false;
});
// Grab the ID of the .tab-content that the hash is referring to
tabId = $(window.location.hash).closest('.tab-content').attr('id');
// Find the anchor element to "click", and click it
$tabs.find('a[href=#' + tabId + ']').click();
});?
Using $.closest()means that the hash can specify the ID of the .tab-contentitself (such as tabs-commentersin your example), or a child thereof.
使用$.closest()意味着散列可以指定.tab-content自身的 ID （例如tabs-commenters在您的示例中）或其子项。
I've made some other cleanup suggestions as well above. No need to keep re-selecting those DOM elements!
我在上面也提出了一些其他的清理建议。无需不断重新选择那些 DOM 元素！
回答by adry
nothing seems to work for me:
似乎没有什么对我有用：
//Default Action
jQuery(".tab_content").hide(); //Hide all content
jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
jQuery(".tab_content:first").show(); //Show first tab content
//On Click Event
jQuery("ul.tabs li").click(function() {
jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
jQuery(this).addClass("active"); //Add "active" class to selected tab
jQuery(".tab_content").hide(); //Hide all tab content
var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
jQuery(activeTab).fadeIn(); //Fade in the active content
return false;
});
回答by Dan Power
This is what I did to get mine to work, based on Matt's answer. I posted this to help others.
根据马特的回答，这就是我为让我的工作而做的事情。我发布这个是为了帮助别人。
<script>
$(document).ready(function(){
$.tabs('#tabs a');
$('#tabs a[tab=\'' + window.location.hash + '\']').trigger('click');
});
</script>
<div id="tabs" class="htabs">
<a tab="#tab_general">General</a>
<a tab="#tab_other">Other</a>
</div>
<div id="tab_general">
Tab 1 here
</div>
<div id="tab_other">
Tab 2 here
</div>
回答by hug
I like Dan Powers answer, I'm currently using a version of that. I did however, at first, think it wasn't working so I did a alert(window.location.hash)and found out that it included the #. Dan's answer is valid though since he does use #in his tab ids, e.g. tab="#tab_general". So, be aware of this.
我喜欢 Dan Powers 的回答，我目前正在使用它的一个版本。但是，起初我认为它不起作用，所以我做了一个alert(window.location.hash)并发现它包含#. 丹的回答是有效的，因为他确实#在他的标签 ID中使用了，例如tab="#tab_general". 所以，请注意这一点。
If you want to read your hash name without the #, e.g. tab="tab_general", replace:
如果你想在没有 # 的情况下读取你的哈希名称，例如tab="tab_general"，替换：
$('#tabs a[tab=\'' + window.location.hash + '\']').trigger('click');
with
和
$('#tabs a[tab=\'' + window.location.hash.substring(1) + '\']').trigger('click');
You can of course also change tabto idor something else.
您当然也可以更改tab为id或其他内容。
I haven't figured out how to link to nested tabs though, when e.g. one tab contains a page with sub tabs.
我还没有弄清楚如何链接到嵌套选项卡，例如，当一个选项卡包含一个带有子选项卡的页面时。
回答by Anthony Mills
Well, you can make your URL something like http://site.com/index.html?votersand then in the page, you check window.location.search(search being the bit including the question mark). If it's "?voters"then you run the code to select the tab. If it's "?commenters"then you run the code to select that tab. Et cetera.
好吧，你可以让你的 URL 像这样http://site.com/index.html?voters，然后在页面中，你检查window.location.search（搜索是包括问号的位）。如果是，"?voters"则运行代码以选择选项卡。如果是，"?commenters"则运行代码以选择该选项卡。等等。
回答by Kenny Cason
You could pass a parameter to the webpage via GET.
您可以通过 GET 将参数传递给网页。
i.e. www.yourpage.com?tab=tab1
IE www.yourpage.com?tab=tab1
then for example (using php)
然后例如（使用php）
<?php
$tab = $_REQUEST['tab'];
?>
then in your JS code, you can do something like:
然后在您的 JS 代码中，您可以执行以下操作：
var default_id = <?php echo $tab; ?>
$("#"+default_id).addClass("active").show();
though you should check to make sure the default_id is valid, and if not load a working default(like you already do)
虽然你应该检查以确保 default_id 是有效的，如果没有加载一个有效的默认值（就像你已经做的那样）
EditI just noticed the question was wanting to use URLs formated like, www.example.com#h-02 in which you're better off sticking to using JS only
编辑我刚刚注意到问题是想要使用格式为 www.example.com#h-02 的 URL，其中最好坚持只使用 JS
回答by Amit
I would try to modify your code a bit. This is how I would do it:
我会尝试稍微修改您的代码。这就是我将如何做到的：
This way you accomplish exactly what you wanted.
通过这种方式，您可以准确地完成您想要的工作。
This is the code that I used:
这是我使用的代码：
<div id="tabs">
<ul class="tabs">
<li><a href="#tabs-voters">Top Voters</a></li>
<li><a href="#tabs-commenters">Top Commenters</a></li>
</ul>
<div id="wrap">
<div id="tabs-voters" class="tab-content">
<p id="h1-01">Tab content</p>
<p>Some content</p>
</div>
<div id="tabs-commenters" class="tab-content">
<h2 id="h-02">Tab cdsfdfontent</h2>
<p>Some contesdfdsfsdfant</p>
</div>
</div>
</div>
and this is the Javascript:
这是 Javascript：
$(document).ready(function() {
$(".tab-content").hide();
$("ul.tabs li a:first").addClass("active").show();
$("#wrap > div").hide().filter(":first").show();
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
});
Let me know how it works out!
让我知道它是如何工作的！
