链接到jQuery选项卡的特定选项卡

Question

http://jsfiddle.net/78QPs/

这是Javascript

$(document).ready(function() {

$(".tab_content").hide();
$(".tab_content:first").show(); 

$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).attr("rel"); 
    $("#"+activeTab).fadeIn(); 
});

}）;

我已经使用上面的内容制作了标签，但是我想使用href从另一个网页链接到上述示例中的tabs2和tab3。 除了使用Jquery UI（例如javascript）以外，还有其他方法吗？

简而言之，如何直接从另一个页面以及上例中的页面内创建指向选项卡的链接？

Answer 1

我猜这是1）监听哈希，以及2）触发相关“标签”的点击。

---

现在，我并不是100％支持jquery对此事件侦听器的支持-但我将其添加。

   /* listen for the anchor hashtag change */
    $(window).on('hashchange', function() {
     /* trigger the click of the tab with the matching rel */
     var _rel =  document.location.hash.
      $("li[rel="+_rel.substring(1)+"]").click();
     });

---

或使用本机的某种侦听器（我使用了它，但是如果可以解决的话，可能需要更新到上面的方法）。

var _currhash;

 function anchorWatch() {
  if(document.location.hash.length>0) {
    /* only run if 'hash' has changed */
     if(_currhash!==document.location.hash) {
       _currhash = document.location.hash;

          $("li[rel="+ _currhash.substring(1)+"]").click();

     }
   }
 } 
 setInterval(anchorWatch,300);

---

这是我在另一个q上添加的可能与之相关的演示和代码： -http : //jsbin.com/soqopepe/1/edit

*（不使用jquery标签），但工作方式相同*

---

这是添加了代码的示例代码：

http://jsfiddle.net/sa2Lj/

要尝试，请http://jsfiddle.net/sa2Lj/show/#tab3

Answer 2

您有多种选择：在网址中使用哈希值引用选项卡的ID，然后使用window.location.hash进行检索。

因此，假设您有一个id为'tab'且window.location.hash ='tab'的标签，则可以执行$（window.location.hash）.hide（）。

另一个不错的选择是使用HTML5历史记录功能将URL相应地更改为所选选项卡。 我想这也将更好。

Answer 3

对于大多数跨浏览器兼容的解决方案，例如：

var queryString = {};
window.location.href.replace(
new RegExp("([^?=&]+)(=([^&]*))?", "g"),
function($0, $1, $2, $3) { queryString[$1] = $3; }
);

if (queryString[base.options.param]) {

var tab = $("a[href='#" + queryString[base.options.param] + "']");

tab
    .closest(".tab_content")
    .find("a")
    .removeClass("active")
    .end()
    .next(".list-wrap")
    .find("ul")
    .hide();
tab.addClass("current");
$("#" + queryString[base.options.param]).show();

};

这将为每个选项卡分配一个查询字符串参数值。