點擊鏈接活動

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的你[R鏈接）：

<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; 
}