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 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>

试试这个......它会起作用...... 让我知道......

在jQuery中制作标签并显示/隐藏tab-esque内容

1 个答案: