1

我正在尝试创建与页面中不同 div 对应的链接导航，当您单击该链接时，它会隐藏所有其他 div 并向下滑动相应的 div。我快到了，但正如你所见，它似乎只适用于任何不是嵌套 div 的东西。（因此，如果我在该部分或 p 标记或其他任何内容中仅包含文本，它将显示，但不会显示子 div。）我的代码在这里：http: //jsfiddle.net/DScMX/16/

此外，我希望能够在页面加载时显示最新的年份（在我的示例中），然后在单击每年时，如前所述，它会隐藏页面上的内容并显示正确的部分。

<div id="years_links">
    <a href="#" id="2013">2013</a> | 
    <a href="#" id="2012">2012</a> | 
    <a href="#" id="2011">2011</a>
</div>
<div id="yearscontent">
    <div id="2013">
        <pclass='item'>some 2013 stuff</p>
    </div>

    <div id="2012">
        <div class='item'>some 2012 stuff</div>
    </div>

    <div id="2011">
        <div class='item'>some 2011 stuff</div>
    </div>
</div>

和js

$(document).ready(function() {
    var yearscontent = $('#yearscontent');
    $('#yearscontent div').hide();
    $('#years_links a').click(function() {
        var year = $(this).attr('id');
        $('#yearscontent div').slideUp(300);
        $('#yearscontent #'+year).slideDown(300);
    });

});
4

2 回答 2

2

$('#yearscontent div')选择下面的所有 div #yearscontent。如果使用$('#yearscontent > div')，它将仅选择 的直系后代#yearscontent。

此外，元素 id 必须是唯一的，因此您需要稍微修改您的 html/脚本。我会改用类。

更新小提琴：http: //jsfiddle.net/N5euG/

更新以在评论中回答您的问题

考虑这个html：

<div id="topDiv">
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</div>
<div id="div4"></div>

#topDiv div将选择#div1、#div2和#div3。内的任何divs#topdiv

#topDiv > div只会选择#div1. 只是的直系后代#topDiv。

于 2013-06-14T13:30:23.503 回答
0

我添加了一些 CSS so 和一个“活动”类，这样你的上下滑动就不会紧张。

#yearscontent div:nth-child(1n+2) {
    display:none;
}

http://jsfiddle.net/N5euG/8/

于 2013-06-14T13:46:25.667 回答