简单的显示/隐藏 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 = block-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>

---

针对 cme​​ts，这里有一个更新示例，当单击第一个 li 时将隐藏每个元素。为了使其更通用，您可以向li 添加一个类（例如hideall）并在if() 中使用.hasClass("hideall") 而不是index == 0，它会检查这是否是第一个@987654336 @ 在列表中。 JSFiddle here，JS 下面。我在 Fiddle 中稍微编辑了 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。这是不必要的，只会使块 DIV 的显示/隐藏更加复杂。

第二：将DIV更改为：

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

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

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

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

Answer 4

先稍微修改一下你的html。

<ul id="nav">
  <li><a href="#block-1">Nav 1</a></li>
  <li><a href="#block-2">Nav 2</a></li>
  <li><a href="#block-3">Nav 3</a></li>
  <li><a href="#block-4">Nav 4</a></li>
</ul>

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

接下来，不要隐藏内容 div。然后你就可以这样做了。

$('#nav li a').click(function() {
    $('.content div').hide();
    var block = $(this).attr('href');
    $(block).show();
    });

Answer 5

为了更灵活一点（这样你就不必匹配索引等等）我推荐这样的东西。

html:

<ul id="nav">
  <li><a href=".block-1">Nav 1</a></li>
  <li><a href=".block-2">Nav 2</a></li>
  <li><a href=".block-3">Nav 3</a></li>
  <li><a href=".block-4">Nav 4</a></li>
 </ul>
<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>

jQuery

$(document).ready(function(){
    $('#nav > li > a').click(function(ev){
        ev.preventDefault();
        var elementToShow = $(this).attr('href');
        $(elementToShow).slideDown().parent().slideDown().find(' > :not('+elementToShow+')').slideUp();
    });
});

这也适用于隐藏的内容元素。

Here is the jsFiddle