jQuery选项卡：如何创建指向特定选项卡的链接？
我正在为标签使用一个简单的jQuery脚本：
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; }); }); HTML（用于index.html）：
Tab content
Some content
Tab content
Some content
Tab content
Some content
我需要做的是创建一个指向index.html＃h-02 ， index.html＃h-03等的工作链接，但是这些简单的链接不起作用，因为默认情况下隐藏了该选项卡。 是否可以修改JS，因此我可以链接到打开index.html时隐藏的选项卡中的书签？ 有人能指出我正确的方向吗？
非常感谢！ 🙂
在文档就绪处理程序中，您可以检查片段的值并使用JavaScript显示相应的选项卡。
$(document).ready(function () { ... var tabId = window.location.hash; // will look something like "#h-02" $(tabId).click(); // after you've bound your click listener });
按要求编辑 ：
$(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? :) });
编辑2：
如果您希望能够指定选项卡内容元素的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(); });
使用$.closest()意味着哈希可以指定.tab-content本身的ID（例如示例中的tabs-commenters ）或其子代。
我上面也做了一些其他的清理建议。 无需继续重新选择那些DOM元素！
似乎没有什么对我有用：
//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; });
好吧，你可以让你的URL像http://site.com/index.html?voters ，然后在页面中，你检查window.location.search （搜索包括问号的位）。 如果它是"?voters"那么你运行代码来选择选项卡。 如果它是"?commenters"那么您运行代码以选择该选项卡。 等等。
我会尝试稍微修改你的代码。 我就是这样做的：
这样你就可以完成你想要的。
这是我使用的代码：
Tab content
Some content
Tab cdsfdfontent
Some contesdfdsfsdfant
这是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; }); });
让我知道它是如何工作的！
您可以通过GET将参数传递给网页。
即www.yourpage.com?tab=tab1
然后例如（使用PHP）
然后在你的JS代码中，你可以做类似的事情：
var default_id = $("#"+default_id).addClass("active").show();
虽然你应该检查以确保default_id有效，如果没有加载工作默认值（就像你已经做的那样）
编辑我刚刚注意到问题是想要使用格式化的url，例如www.example.com＃h-02，你最好只坚持使用JS
我喜欢Dan Powers的回答，我现在正在使用它的一个版本。 但是，我一开始认为它没有工作，所以我做了一个alert(window.location.hash)并发现它包括了# 。 Dan的回答是有效的，因为他在他的标签ID中使用了# ，例如tab="#tab_general" 。 所以，要注意这一点。
如果要在没有＃的情况下读取哈希名称，例如tab="tab_general" ，请替换：
$('#tabs a[tab=\'' + window.location.hash + '\']').trigger('click');
同
$('#tabs a[tab=\'' + window.location.hash.substring(1) + '\']').trigger('click');
您当然也可以将tab更改为id或其他内容。
虽然例如一个选项卡包含带有子选项卡的页面，但我还没想出如何链接到嵌套选项卡。