鏈接到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();

};

這將為每個選項卡分配一個查詢字符串參數值。