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

Question

我的问题很简单。

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

我的问题是选项卡可以不被链接到，我需要能够链接到另一个网站或页面的选项卡，并在页面加载时选择该选项卡。

即：我有三个显示不同产品的选项卡，默认情况下选项卡 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;
  });

});

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

提前致谢。

Answer 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 );
});

Answer 2

在多次遇到这个问题并与 SEO 专家交谈后，我决定停止使用 << a＞从现在开始，我使用简单的 < 选项卡元素跨度>元素，如下所示：

<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>

在 < 中使用 '#' a＞元素（虚拟链接）对 SEO 不友好，使用 <跨度> elements 使标题/选项卡成为页面内容的一部分（SEO 友好），并且功能保持完整。

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

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