如何激活在JavaScript標籤與錨

Question

我想激活，在同一個頁面，標籤（所有選項卡有一個ID爲#tab1，#tab2，#tab3 ...），當我點擊一個#url ...
例如，當我點擊鏈接href="#tab3"時，激活#tab3。

我認爲這是很容易的，但不適合我。 下面是HTML代碼：

<div class="tabs p3"> 
    <ul class="nav"> 
     <li class="selected"><a href="#tab1">popular</a></li> 
     <li class=""><a href="#tab2">featured</a></li> 
    </ul> 
    <div id="tab1" class="tab-content" style="display: block; "> 
     <div class="inner"> 
      <p>Lorem ipsum dolor elit.</p> 
     </div> 
    </div> 
    <div id="tab2" class="tab-content" style="display: none; "> 
     <div class="inner"> 
      <p>Phasellus non mi vel turpis gravida rhoncus eget lacinia tellus.</p> 
     </div> 
    </div> 
</div> 

所以，如果我點擊<a href="#tab2">，該#tab2是激活。沒問題。但是，如果我在我的頁面的任何地方插入鏈接爲<a href="#tab2">，則此鏈接不會激活此標籤...
可能我需要在我的#tab2上創建像<a name="tab2">這樣的錨點？但它不起作用。

下面是javascript代碼我使用的標籤：

$(function(){ 
    tabs.init(); 
}); 
tabs = { 
    init : function(){ 
     $('.tabs').each(function(){ 
      $(this).find('.tab-content').hide(); 
      $($(this).find('ul.nav .selected a').attr('href')).fadeIn(300); 
      $(this).find('ul.nav a').click(function(){ 
       $(this).parents('.tabs').find('.tab-content').hide(); 
       $($(this).attr('href')).fadeIn(300); 
       $(this).parent().addClass('selected').siblings().removeClass('selected'); 
       return false; 
      }); 
     }); 
    } 
} 

Answer 1

我有點明白了更好的，你現在是後什麼。

好吧，如果你想鏈接內標籤內容爲指向其他標籤同一組的你可以做到以下幾點：

// find all <a> with href start with a '#' in tab-content 
$tab.find('.tab-content a[href^="#"]').click(function(e) { 

    $tab.find('.nav a[href="' + $(this).attr('href') + '"]').trigger('click'); 

    return false; 
}); 

下面是完整的代碼，有點優化（查看評論）：

$('.tabs').each(function() { 

     // save $(this) (the .tabs container) for re-use 
     var $tab = $(this); 

     $tab.find('.tab-content').hide(); 
     $($tab.find('.nav .selected a').attr('href')).fadeIn(300); 

     $tab.find('.nav a').click(function(){ 

      // save $(this) (the clicked link) for re-use 
      var $a = $(this); 

      $a.parents('.tabs').find('.tab-content').hide(); 
      $($a.attr('href')).fadeIn(300); 
      $a.parent().addClass('selected').siblings().removeClass('selected'); 

      return false; 

     }); 

     // find all <a> with href start with a '#' in tab-content 
     $tab.find('.tab-content a[href^="#"]').click(function(e) { 

      $tab.find('.nav a[href="' + $(this).attr('href') + '"]').trigger('click'); 

      return false; 
     }); 
    }); 

DEMO

如果您想在頁面上的任意位置打開任何選項卡組的特定選項卡，可以使用鏈接任意位置，這是一個更復雜的問題。

你爲什麼不把已經存在的，全功能的插件有一個標籤系統，如：

• jQuery UI Tabs
• jQuery Tools Tabs