简单地显示/隐藏jQuery故障

Question

在这个问题上的任何帮助都将不胜感激。我有一个像这样的主导航：

<ul>
  <li><a href="">Nav 1</a></li>
  <li><a href="">Nav 2</a></li>
  <li><a href="">Nav 3</a></li>
  <li><a href="">Nav 4</a></li>
 </ul>

下面的某个地方有一个内容div，如下所示：

<div id="content">
  <div class="block-1">
    <p>Lorem ipsum</p>
  </div>
  <div class="block-2">
    <p>Lorem ipsum</p>
  </div>
  <div class="block-3">
    <p>Lorem ipsum</p>
  </div>
  <div class="block-4">
    <p>Lorem ipsum</p>
  </div>
</div>

#content div在样式表中设置了display:none；。它内部的每个块也是如此。当有人点击导航项目时，我希望它显示内容容器，只有与之对应的区块。Nav1 =块-1等...当您单击另一个链接时，它会隐藏另一个链接，并显示新的选择。

有什么想法吗？

Answer 1

我已经为你写了一个quick JSFiddle。使用jQuery的.index()方法，您可以获得所单击链接的索引，并使用该索引显示正确的div。我在下面的代码中使用了一个类来显示/隐藏您的div。例如，您可以用一个额外的逻辑来替换它，以淡出每个div。

要说明的另一点是，您不需要在div上使用-1、-2等后缀；index()和:eq()选择器会为您处理这些后缀。我稍微更改了您的HTML，下面是JS：

JavaScript

$(document).ready(function() {
    $("ul a").click(function() {
        var index = $(this).parent().index();

        $("div#content").find(".show").removeClass("show");
        $("div#content").find(".block:eq(" + index + ")").addClass("show");
    });
});

HTML

<ul>
  <li><a href="#">Nav 1</a></li>
  <li><a href="#">Nav 2</a></li>
  <li><a href="#">Nav 3</a></li>
  <li><a href="#">Nav 4</a></li>
 </ul>

<div id="content">
  <div class="block">
    <p>Lorem ipsum 1</p>
  </div>
  <div class="block">
    <p>Lorem ipsum 2</p>
  </div>
  <div class="block">
    <p>Lorem ipsum 3</p>
  </div>
  <div class="block">
    <p>Lorem ipsum 4</p>
  </div>
</div>

作为对注释的响应，这里有一个更新示例，它将在单击第一个li时隐藏每个元素。为了使它更通用，您可以向li中添加一个类(比如hideall)，并在if()中使用.hasClass("hideall")而不是index == 0，后者会检查这是否是列表中的第一个li。JSFiddle here，JS如下。我在小提琴中对HTML进行了一些编辑。

$(document).ready(function() {
    $("ul a").click(function() {
        var index = $(this).parent().index();
        console.log(index);

        if(index == 0)
        {
            $("div#content > div").removeClass("show");
        }
        else
        {
            index--;
            $("div#content").find(".show").removeClass("show");
            $("div#content").find(".block:eq(" + index + ")").addClass("show");
        }
    });
});

Answer 2

您需要的是jQuery选项卡：http://jqueryui.com/demos/tabs/

Answer 3

第一:不要隐藏DIV的内容。这是不必要的，并且只会使块DIVs的显示/隐藏变得更加复杂。

第二:将DIVs更改为：

<div id="content">
  <div class="block-1 block">
    <p>Lorem ipsum</p>
  </div>
  <div class="block-2 block">
    <p>Lorem ipsum</p>
  </div>
  <div class="block-3 block">
    <p>Lorem ipsum</p>
  </div>
  <div class="block-4 block">
    <p>Lorem ipsum</p>
  </div>
</div>

然后将LIs更改为如下所示：

<li><a href="" onClick='$(".block").hide();$(".block-1").show()'>Nav 1</a></li>
<li><a href="" onClick='$(".block").hide();$(".block-2").show()'>Nav 2</a></li>
<li><a href="" onClick='$(".block").hide();$(".block-3").show()'>Nav 3</a></li>
<li><a href="" onClick='$(".block").hide();$(".block-4").show()'>Nav 4</a></li>

这将首先隐藏所有内容块，然后显示您想要显示的内容块。