Question

我想一次显示一个列表元素。理想情况下，当用户打开页面时，将显示第一个列表元素。当用户单击“下一步”按钮时，第一个列表元素将消失，第二个列表元素将出现。当用户单击“上一个”按钮时，将显示前一个元素。到目前为止，下一个按钮工作正常，但前一个按钮滚动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>

Answer 1

下一个工作而不是之前工作的原因是因为第一个项目上的.prev()会在它之前为您提供锚标记，请使用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');
});

FIDDLE

Answer 2

变化：

$('#event_months li')

到

$('.event_months li')

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

使用jQuery一次显示一个列表元素; “上一页”链接坏了

2 个答案: