2

您好，让我先解释一下，我根本没有使用 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 是重叠的。有什么帮助吗？谢谢！

4

2 回答 2

2

你可以用这个

 $(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') // <-- 获取父类元素下的所有 div

.eq(index) // 将获取给定索引处的元素，如下所示

$(this)// <-- 当前点击的锚标签

.index('#nav a'); // <-- 获取当前锚标签与其他锚标签相比的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/

于 2012-08-02T17:45:34.763 回答
0

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

于 2012-08-02T17:27:29.197 回答