Question

我的问题很简单。

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

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

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

});

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

提前致谢。

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专家交谈后，我决定停止使用＆lt; a＆gt;从现在开始的标签元素，而不是我使用简单＆lt; span＆gt;元素，像这样：

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

在＆lt;中使用'＃' a＆gt;元素（虚拟链接）不是SEO友好的，使用＆lt; span＆gt;元素使标题/标签成为页面内容的一部分（SEO友好），功能保持不变。

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

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

jQuery：标签/内容可以链接到的标签

2 个答案: