如何使用JQuery中的錨標記從其他頁面中選擇特定的選項卡？

Question

我不知道我們是否可以從另一個頁面的JQuery選項卡系統中選擇一個特定的選項卡..？ 例如，我有一個3菜單部分，即家庭，服務，聯繫人。

在服務頁面我有一個選項卡系統，現在有3個選項卡（Name1，Name2，Name3）。 例如我在主頁中，並在服務下的子菜單中，我有鏈接到選項卡（Name1，Name2，Name3）。

如果我在子菜單的name2中單擊，我需要在服務頁面中顯示Name2選項卡（默認可見一個是Name1）。

我試圖給這樣的... ... services.php＃TAB2在它的鏈接（如錨標記法） 遺憾的是它不工作..

我用以下JQuery的我標籤系統...

var $j = jQuery.noConflict(); 
     $j(window).load(function(){ 
      initTabs(); 
}); 

function initTabs(){ 

    var strHash = document.location.hash; 

    if (strHash == "") { 

    if($j('.tabs').length){ 
     var $tabsNav = $j('.tabs-nav'); 
     var $tabsNavLis = $tabsNav.children('li'); 
     $tabsNav.each(function() { 
      var $this = $j(this); 
      $this.next().children('.tab-content').stop(true,true).hide().first().show(); 
      $this.children('li').first().addClass('active').stop(true,true).show(); 
     }); 
     } else 

     $("a[href='" + strHash + "']").parent().click(); 


     $tabsNavLis.on('click', function(e) { 
      var $this = $j(this); 
      $this.siblings().removeClass('active').end().addClass('active'); 
      $this.parent().next().children('.tab-content').stop(true,true).hide().siblings($this.find('a').attr('href')).fadeIn(); 
      e.preventDefault(); 
     }); 
    }} 

標籤導航是象下面這樣：

<ul class="tabs-nav"> 
       <li><a href="#tab-1">name1</a></li> 
       <li><a href="#tab-2">name2</a></li> 
       <li><a href="#tab-3">name3</a></li> 
    </ul> 

<div class="tabs-container"> 
      <div id="tab-1" class="tab-content" style="display: none;">TABLE 1</div> 
      <div id="tab-2" class="tab-content" style="display: none;">TABLE 2</div> 
      <div id="tab-3" class="tab-content" style="display: none;">TABLE 3</div> 
     </div> 

在主頁上我的菜單選項像一個波紋管，因此​​，如果有人點擊MENU2在主頁它應該將他重定向到服務頁面，但打開tab2。

<nav class="menu-container"> 
<ul class="menu" id=""> 
<li id="menu-item" class=""><a class="" href="services.php#tab2" style="line-height: 82px;"><span>Name2</span></a></li> 
<li id="menu-item" class=""><a class="" href="services.php#tab3" style="line-height: 82px;"><span>Name3</span></a></li> 
</ul> 
</nav> 

我希望有人能回答上述問題。

非常感謝

馬克

Answer 1

我已經設法通過在頁面加載時檢查散列來找到解決方案，然後觸發點擊。 這是整個代碼，希望它能幫助別人。

var $j = jQuery.noConflict(); 
    $j(window).load(function(){ 
     initTabs(); 
}); 

function initTabs(){ 

    if($j('.tabs').length){ 
     var $tabsNav = $j('.tabs-nav'); 
     var $tabsNavLis = $tabsNav.children('li'); 
     $tabsNav.each(function() { 
      var $this = $j(this); 
      $this.next().children('.tab-content').stop(true,true).hide().first().show(); 
      $this.children('li').first().addClass('active').stop(true,true).show(); 
     }); 
     $tabsNavLis.on('click', function(e) { 
      var $this = $j(this); 
      $this.siblings().removeClass('active').end().addClass('active'); 
      $this.parent().next().children('.tab-content').stop(true,true).hide().siblings($this.find('a').attr('href')).fadeIn(); 
      e.preventDefault(); 
     }); 

    var hash = $j.trim(window.location.hash); 
    if (hash) $j('.tabs-nav a[href$="'+hash+'"]').trigger('click'); 

    } 
} 

Answer 2

一種解決方案可能是使用cookie，將想要訪問和使用cookie的值以編程方式選擇標籤選項卡的名稱。