Активность ссылки по клику

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

Дайте якоря соответствующих методы JQuery ID, и это легко:

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