设置一定的选项卡上的自定义选项卡的jQuery

Question

我使用http://jqueryfordesigners.com/jquery-tabs/的一个项目，JavaScript代码看起来像这样的黏合负荷为活动：

<script type="text/javascript" charset="utf-8"> 
      $(function() { 
        var tabContainers = $('div.tabs > div'); 
        tabContainers.hide().filter(':first').show(); 

        $('div.tabs ul.tabNavigation a').click(function() { 
          tabContainers.hide(); 
          tabContainers.filter(this.hash).show(); 
          $('div.tabs ul.tabNavigation a').removeClass('selected'); 
          $(this).addClass('selected'); 
          return false; 
        }).filter(':first').click(); 
      }); 
    </script>  

和标签的HTML如下：

<div class="tabs"> 
    <ul class="tabNavigation"> 
     <li><a href="#first">First</a></li> 
     <li><a href="#second">Second</a></li> 
     <li><a href="#third">Third</a></li> 
    </ul> 

    <div id="first"> 
     <h2>First</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div id="second"> 

     <h2>Second</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

    </div> 
    <div id="third"> 
     <h2>Third</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
</div> 

现在的问题是：如何在页面加载时如何设置第二个标签页默认显示和默认显示？我试着用“秒”中的JavaScript代码来替换“第一”的所有实例，但它wouldnt工作...

这里是CSS完成了演示页为您玩具周围http://jqueryfordesigners.com/demo/tabs.html :)

请帮忙！

Answer 1

有两个部分被选择第一选项卡和因而需要改变：

tabContainers.hide().filter(':first').show(); 

和

.filter(':first').click(); 

滤波器被使用:first，其选择所述第一匹配部件的选择器。 :second不是有效的选择器。要选择第二个选项卡代替，试试这个：

var tabContainers = $('div.tabs > div'); 
tabContainers.hide(); // don't need to show a tab here; it'll be shown below 

$('div.tabs ul.tabNavigation a').click(function() { 
    tabContainers.hide(); 
    tabContainers.filter(this.hash).show(); 
    $('div.tabs ul.tabNavigation a').removeClass('selected'); 
    $(this).addClass('selected'); 
    return false; 
}).filter('[href="#second"]').click(); // click second link, based on href attr 

这可以进一步清理，但希望它可以让你开始。您可以在http://api.jquery.com/filter/和jQuery click（）方法http://api.jquery.com/click/上阅读jQuery filter（）方法。