制作选项卡并在jQuery中显示/隐藏tab-esque内容

Question

所以选项卡可能不是在我的场景中使用的正确词，但这里是情况（我也不想使用jQuery-UI库）。我认为这可以做得更简单。

导航标记在头：

<ul> 
    <li><a class="active" href="#" title="">Uno</a></li> 
    <li><a href="#" title="">Dos</a></li> 
    <li><a href="#" title="">Tres</a></li> 
    <li><a href="#" title="">Cuatro</a></li> 
</ul> 

为内容主体的标记（它们不包含在同一div，他们也可以）：

<div class="block"> 
    <p>Lorem ipsum</p> 
    </div> 
    <div class="block"> 
    <p>Lorem ipsum</p> 
    </div> 
    <div class="block"> 
    <p>Lorem ipsum</p> 
    </div> 
    <div class="block"> 
    <p>Lorem ipsum</p> 
    </div> 

我想做两件事。 1.）隐藏除第一个内容块之外的所有内容（与第一个列表项目相对应，因此在加载时为.active）2.单击任何列表项目时，它隐藏所有其他内容块并显示适当的内容一个，同时在nav中添加一个.active类。

非常感谢您的帮助。

Answer 1

导航链接....

<div class="sidebar left"> 
       <ul id="navigation"> 
        <li class="active" ><a href="#" >Basic Information</a></li> 
        <li class="inactive"><a href="#" >Profile Picture</a></li> 
        <li class="inactive"><a href="#" >Education And Work</a></li> 
        <li class="inactive"><a href="#" >Social Contact</a></li> 
        <li class="inactive"><a href="#" >Security</a></li> 
       </ul> 
    </div> 

代码为您节....

<div class="sec"> 
Section1 
</div> 
<div class="sec"> 
Section2 
</div> 
<div class="sec"> 
Section3 
</div> 
<div class="sec"> 
Section4 
</div> 

上面的html jQuery代码可能是这样的...

<script type='text/javascript'> 
     $(document).ready(function() {  

     $('ul#navigation li').click(function(){ 
      var number = $(this).index(); 
      $('.sec').hide().eq(number).show(); 
      $(this).toggleClass('active inactive'); 
      $('ul#navigation li').not(this).removeClass('active').addClass('inactive'); 
     }); 

     $('.sec').not(':first').hide(); 

     }); 
    </script> 

试试这个......它会工作... 让我知道...