jQuery：选项卡/内容可以链接到的选项卡答案

【问题标题】：jQuery: tabs where the tab/content can be linked tojQuery：选项卡/内容可以链接到的选项卡
【发布时间】：2010-04-22 02:56:20
【问题描述】：

我的问题很简单。

我已经实现了一个标签系统，我可能会花更多的时间来实现另一个我需要的解决方案，而不是尝试调整我拥有的代码，并在询问的同时学习一些东西:)

我的问题是标签无法链接，我需要能够链接到另一个网站或页面的标签，并在页面加载时选择该标签。

ie：我有三个显示不同产品的选项卡，默认情况下，当页面加载时选项卡 1 处于活动状态/选中状态。从主页我想链接到选项卡 2，但我无法链接到选项卡 2，因为它没有被选中。不确定这是否有意义。

标签：

 <ul>
  <li><a href="#tab1">Product 1</a></li>
  <li><a href="#tab2">Product 2</a></li>
  <li><a href="#tab3">Product 3</a></li> 
 </ul>

 <div class="tab_container">
  <div id="tab1" class="tab_content">Product 1 info...</div>
  <div id="tab2" class="tab_content">Product 2 info...</div>
  <div id="tab3" class="tab_content">Product 3 info...</div>
 </div>

我的 jQuery：

$(document).ready(function() {

//Default Action
$(".tab_content").hide(); 
$("ul.tabs li:first").addClass("active").show(); 
$(".tab_content:first").show(); 

//On Click Event
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); 
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn(); 
    return false;
  });

});

有没有一种方法可以调整这段代码，使其能够从任何地方链接到任何选项卡，并在页面加载时选择该选项卡？

提前致谢。

【问题讨论】：

标签： javascript jquery html tabs

【解决方案1】：

你的标签会像这样更有用：

 <ul>
  <li><a href="#tab1">Product 1</a></li>
  <li><a href="#tab2">Product 2</a></li>
  <li><a href="#tab3">Product 3</a></li> 
 </ul>

 <div class="tab_container">
  <div id="tab1" class="tab_content">Product 1 info...</div>
  <div id="tab2" class="tab_content">Product 2 info...</div>
  <div id="tab3" class="tab_content">Product 3 info...</div>
 </div>

这样您现在就可以在浏览器的 URL 中查找哈希（例如，使用 location.pathname 提取 URL 哈希并使用 $.tabs().select([id] 或 [index])设置标签）。

例如

$(function(){
   $('tabs').tabs();
   var hash = location.hash;
   $('tabs').tabs( "select" , hash );
});

【讨论】：

奇怪的是，你在我之后 5 分钟回答了同样的问题并获得了所有选票：S
我知道你的感受，并为此道歉。但公平地说，当 SO 通知显示有一个新答案时，我已经写了初稿。我没有抄袭；我们都同意这是回答问题的一种正确方法。
感谢您提供的信息...但是，我必须道歉，我在代码中犯了一个错误：我没有使用“products.php”，而是将标签设置为“#tab1”，“ #tab2"、"#tab3" 等。我更正了我的第一篇文章。如何将您提到的示例代码与我在第一篇文章中的代码合并？非常感谢。
等一下。您是在使用 jQuery UI 选项卡，还是使用自己的选项卡？我假设您使用的是 jQuery UI。
不，我没有使用 jQuery UI 选项卡，我在某处在线找到了该代码，我不记得在哪里 :( 此时仅实现 jQuery UI 选项卡可能更快，对吧？

【解决方案2】：

在多次遇到此问题并与 SEO 专家交谈后，我决定从现在开始停止在标签中使用元素，而是使用简单的元素，如下所示：

<ul class="tabs">
  <li><span rel="tabs1" class="defaulttab">Tab 1</span></li>
  <li><span rel="tabs2">Tab 2</span></li>
  <li><span rel="tabs3">Tab 3</span></li>
</ul>

在元素（虚拟链接）中使用“#”对 SEO 不友好，使用元素使标题/标签成为页面内容的一部分（SEO 友好）并且功能保持不变.

您需要做的就是修改您的脚本以引用 's 而不是 's，并添加 'cursor:pointer;' 的 CSS。这适用于所有浏览器，包括 IE6。

此解决方案的另一个好处是，如果选项卡位于页面下方，则在单击选项卡时页面不会跳回，这是一个很大的可用性改进。

【讨论】：