0

我想一次显示一个列表元素。理想情况下，第一个列表元素将在用户打开页面时显示。当用户单击“下一步”按钮时，第一个列表元素将消失，而第二个元素将出现。当用户单击“上一个”按钮时，将显示上一个元素。到目前为止，下一个按钮工作得很好，但上一个按钮滚动通过 li 元素，但继续到链接元素，这不应该发生。这是我正在使用的代码。

HTML：

<div class="event_months">
    <a class="prev" href="#">&#60;</a>
    <a class="next" href="#">&#62;</a>
    <li>one</li>
    <li>two</li>
</div>

CSS：

.event_months .noShow {
    display:none;
}

.event_months .doShow {
    display:inline;
}

.event_months .first {
    display:inline !important;
​}

jQuery：

<script type = "text/javascript" > $('document').ready(function() {
    $(".event_months li:nth-child(3)").addClass("doShow");

    $("a.next").click(function() {
        $('.first').toggleClass("first");
        var $toHighlight = $('.doShow').next().length > 0 ? $('.doShow').next() : $('.event_months li').first();
        $('.doShow').removeClass('doShow');
        $toHighlight.addClass('doShow');
    });

    $("a.prev").click(function() {
        $('.first').toggleClass("first");
        var $toHighlight = $('.doShow').prev().length > 0 ? $('.doShow').prev() : $('#event_months li').last();
        $('.doShow').removeClass('doShow');
        $toHighlight.addClass('doShow');
    });

}); 
</script>​​​​​​
4

2 回答 2

1

下一个工作而不是上一个工作的原因是因为.prev()在第一个项目上会给你一个锚标记，在它之前使用一个选择器来工作

$(".event_months li:nth-child(3)").addClass("doShow");

$("a.next").click(function() {
    $('.first').toggleClass("first");
    var $toHighlight = $('.doShow').next('li').length > 0 ? $('.doShow').next('li') : $('.event_months li').first();
    $('.doShow').removeClass('doShow');
    $toHighlight.addClass('doShow');
});

$("a.prev").click(function() {
    $('.first').toggleClass("first");
    var $toHighlight = $('.doShow').prev('li').length > 0 ? $('.doShow').prev('li') : $('.event_months li').last();
    $('.doShow').removeClass('doShow');
    $toHighlight.addClass('doShow');
});

小提琴

于 2012-06-18T04:55:39.663 回答
0

改变：

$('#event_months li')

到

$('.event_months li')

您使用了 id 选择器而不是类选择器。

于 2012-06-18T04:48:49.753 回答