简单显示/隐藏jQuery的麻烦

时间:2011-08-28 22:06:15

标签: jquery show-hide

对此问题的任何帮助将不胜感激。我有一个像这样的主导航:

<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等...当你点击另一个链接时,它会隐藏另一个链接并显示新的选择。

有什么想法吗?

5 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

我为你写了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,检查这是否是列表中的第一个liJSFiddle 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");
        }
    });
});

答案 3 :(得分:0)

首先修改你的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();
    });

答案 4 :(得分:0)

为了更灵活一点(所以你不必匹配索引等等)我推荐这样的东西。

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