-6

我正在编写一个有 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 之前的 div,并且它应该对“下一个链接”执行相同的操作。

4

6 回答 6

4

这是一个例子:

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>

查询:

$('#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);
    });
于 2013-06-28T13:05:36.237 回答
1

您在 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();
    }
});
于 2013-06-28T13:05:48.357 回答
1

给锚点 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();
});

小提琴

于 2013-06-28T13:08:05.270 回答
0

如果你使用 jQuery,你应该看看.next().prev()

于 2013-06-28T13:08:18.787 回答
0

或者,如果您想滚动到所需的 div,您可以使用 jQuery 的scrollTo().

于 2013-06-28T13:09:37.720 回答
0

在 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;
}
于 2013-06-28T13:10:14.800 回答