Question

您好，让我首先解释一下，我根本没有使用过jQuery。简单的显示和隐藏以及基本的UI是程度。所以说，我试图能够显示一个div，这实际上是一个链接到“链接”的“页面”。

标记：

<body>
<!--Footer and Navigation Div's-->
<div id="bg"><img src="images/bg.jpg" alt=""></div>
    <div id="footer">
        <p>S.E. <span>yoga</span></p>
            <div id="nav">
                <ul><a href="#">Link 1</a></ul>
                <ul><a href="#">Link 2</a></ul>
                <ul><a href="#">Link 3</a></ul>
                <ul><a href="#">Link 4</a></ul>
            </div>
    </div>
<!--END Footer and Navigation Div's-->

<div class="parent">
<div class="a">
        <p>this is a</p>
    </div>   
   <div class="b">
        <p>this is b</p>
    </div>
    <div class="c">
        <p>this is c</p>
    </div>
    <div class="d">
        <p>this is d</p>
    </div>
</body>
</html>

jQuery的：

 /*
 $(document).ready(function(){
 $('#nav').click(function(){
        $(".a").slideToggle();
  var divname= this.value;
          $("#"+divname).show("slow").siblings().hide("slow");

    });
});*/ 

    $(document).ready(function(){
    $('.a, .b, .c, .d').hide();
});;

所以我使用的第一个脚本（注释掉了）我将用作起点。第二个脚本，它们都隐藏在我要去的地方。将它们全部隐藏起来，然后一次只显示一个。

div是重叠的。有帮助吗？谢谢！

Answer 1

您可以使用此

 $(document).ready(function(){
         $('.parent  div').hide(); // hide div's on load using parent class as a starting point     
         $('#nav a').click(function() {  // on the anchor clicks that are inside div with id=nav
            var $div = $('.parent div').eq($(this).index('#nav a'));  // get the relevant div
            $div.show();  // show the relevant div
            $('.parent div').not($div).hide();  // hide all but the relevant div
        });
    }):

编辑：

$('.parent div') //＆lt; - 这将获得具有类父

的元素下的所有div

.eq(index) //将获取给定索引处的元素，该元素是以下

$(this) //＆lt; - 当前点击的锚标记

.index('#nav a'); //＆lt; - 获取当前锚标记的index()与其他其他锚标记相比

奇怪的是我通常使用$（this）.index（）并且它可以工作，但这次没有，所以我不得不在索引中指定一个选择器。

还修复你的html而不是

 <div id="nav">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</div>

更新了小提琴

http://jsfiddle.net/HpCWW/1/

Answer 2

如果您想一次只显示一个div，请考虑使用jquery accordion。 http://jqueryui.com/demos/accordion/

jQuery多个div显示一次只隐藏一个

2 个答案: