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

【问题标题】：Making tab and showing/hiding tab-esque content in jQuery在 jQuery 中制作选项卡并显示/隐藏选项卡式内容
【发布时间】：2011-08-29 03:45:13
【问题描述】：

所以 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 类。

非常感谢您的帮助。

【问题讨论】：

标签： javascript jquery tabs show-hide

【解决方案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>

试试这个...它会工作...告诉我...

【讨论】：