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

Question

所以 tab 可能不是在我的场景中使用的正确词，但情况是这样的（而且我也不想使用 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 中）：

  <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.） 单击任何列表项时，它会隐藏所有其他内容块并显示相应的内容一，同时在导航中向其添加 .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> 

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