Question

我正在编写一个有5 divs。

的网站

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>

在网站的某个地方，我想放两个链接。

<a href="">PREVIOUS</a>
<a href="">NEXT</a>

我需要“上一个链接”（点击时）向我显示之前的div，它应该与“下一个链接”相同。

Answer 1

这里你举个例子：

JSFIDDLE

HTML：

    <button id="prev" disabled="disabled">Prev</button>
    <button id="next">Next</button>
    <hr /> 

<div id="main">   
    <div id="div1" class="first current">Div 1</div>
    <div id="div2">Div 2</div>
    <div id="div3" class="last">Div 3</div>    
</div>

JQUERY：

$('#next').click(function() {
        $('.current').removeClass('current').hide()
            .next().show().addClass('current');
        if ($('.current').hasClass('last')) {
           $('#next').prop('disabled', true);
        }
        $('#prev').prop('disabled', false);
    });

    $('#prev').click(function() {
        $('.current').removeClass('current').hide()
            .prev().show().addClass('current');
        if ($('.current').hasClass('first')) {
            $('#prev').prop('disabled', true);
        }
        $('#next').prop('disabled', false);
    });

Answer 2

你div中的当前课程应该是ID，让我们给所有这些div一个普通的课程（我还在你的链接中添加了ID）：

<div id="one" class="divCycle"></div>
<div id="two" class="divCycle"></div>
<div id="three" class="divCycle"></div>
<div id="four" class="divCycle"></div>
<div id="five" class="divCycle"></div>

<a href="#" id="divPrev">PREVIOUS</a>
<a href="#" id="divNext">NEXT</a>

然后我们可以为您的按钮添加点击处理程序：

$("#divPrev").click(function() {
    var visibleDiv = $(".divCycle:visible");

    //verify there is a previous div
    if (visibleDiv.prev(".divCycle").length) {
        visibleDiv.prev(".divCycle").show();
        visibleDiv.hide();
    }
});

$("#divNext").click(function() {
    var visibleDiv = $(".divCycle:visible");

    //verify there is a next div
    if (visibleDiv.next(".divCycle").length) {
        visibleDiv.next(".divCycle").show;
        visibleDiv.hide();
    }
});

Answer 3

给锚点ID匹配的jQuery方法，这很简单：

var elems = $('.one, .two, .three, .four, .five');

$('#prev, #next').on('click', function(e) {
    e.preventDefault();
    var n = elems.filter(':visible').hide()[this.id]();
        n = elems.is(n) ? n : this.id=='next' ? elems.first() : elems.last();
    n.show();
});

FIDDLE

Answer 4

如果您使用的是jQuery，请查看.next()和.prev()

Answer 5

或者如果你想滚动到所需的div，你可以使用jQuery的scrollTo()。

Answer 6

在HTML中

    <button id="prev" disabled="disabled">Prev</button>
    <button id="next">Next</button>
    <hr /> 

<div id="main">   
    <div id="div1" class="first current">Div 1</div>
    <div id="div2">Div 2</div>
    <div id="div3">Div 3</div>  
    <div id="div2">Div 4</div>
    <div id="div3" class="last">Div 5</div>  
</div>

将其放在JScript中

$('#next').click(function() {
    $('.current').removeClass('current').hide()
        .next().show().addClass('current');
    if ($('.current').hasClass('last')) {
        $('#next').attr('disabled', true);
    }
    $('#prev').attr('disabled', null);
});

$('#prev').click(function() {
    $('.current').removeClass('current').hide()
        .prev().show().addClass('current');
    if ($('.current').hasClass('first')) {
        $('#prev').attr('disabled', true);
    }
    $('#next').attr('disabled', null);
});

在CSS中

#div2,#div3,#div4,#div5{
    display:none;
}

点击链接活动

6 个答案: