如何激活在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