Question

我有以下情况：

<ul id="menu">
    <li>Show first div</li>
    <li>Show second div</li>
    <li>Show third div</li>
</ul>

<div id="boxes">
    <div style="display: none;">Lorem ipsum dolor sit amet consectetur</div>
    <div style="display: none;">Lorem ipsum dolor sit amet consectetur</div>
    <div style="display: none;">Lorem ipsum dolor sit amet consectetur</div>
</div>

我想要的是当用户点击li要显示的相应div时。

现在，我正按以下方式进行：

$.("#menu li").click(function() {

    var position_clicked = $(this).index();

    $.("#boxes div:nth-child(" + (position_clicked + 1 ) + ")").show();

});

它运行正常，但我记得有一种更简单的方法可以在jQuery上使用一些nth-child参数，例如：

// THIS CODE DOESN'T WORK!
// DO NOT COPY AND PASTE IT WITHOUT READING!
$.("#menu li:nth-child(n)").click(function() {

    $.("#boxes div:nth-child(n)").show();

});

如果没有DOM位置计算，怎么办呢？

Answer 1

这就是你要找的东西：

$("#menu li").click(function() {
    var index = $(this).index();
    $('#boxes div:eq('+index+')').show();

});

你可以查看我的小提琴http://jsfiddle.net/augusto1982/KQcAZ/

我更新了小提琴，以防你想要在显示当前选择之前隐藏之前的选择。

根据DOM索引显示项目

1 个答案: