HTML：

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

你想要的是jQuery标签：http://jqueryui.com/demos/tabs/

Answer 2

首先：不要隐藏内容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 3

我为你写了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时隐藏每个元素。为了使其更具通用性，您可以向hideall添加一个类（例如li）并在.hasClass("hideall")内使用if()而不是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 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

简单显示/隐藏jQuery的麻烦

5 个答案:

的JavaScript

HTML

HTML：

的jQuery