Javascript 点击链接活动

我正在编写一个有5个div的网站

<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，它应该与“下一个链接”相同。

这里是一个示例：

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>

---

您的div中的当前类可能应该是ID类，让我们为所有这些div提供一个公共类（我还为您的链接添加了ID）：

---

提供锚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();
});

---

如果您正在使用jQuery，您应该查看并

或者如果您想滚动到所需的div，您可以在HTML中使用jQuery的

scrollTo（）

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

和在CSS中

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

---

从这里学习：发布一些尝试过的代码..“before”作为DOM中它上面的元素，或者“before”作为在当前元素之前单击并显示的元素？Ass作为DOM中它上面的元素，很抱歉我没有英语。

[this.id]（）

看起来像是一场维护性噩梦，你知道他们说的：总是编码，就好像最终维护你的编码的人是一个知道你住在哪里的暴力精神病患者一样。-这里发布的代码不是我见过的最可读的，这是我想说的：）一个新颖的想法，当然……因为我是最终维护代码的人，这不是一个问题，它比其他任何答案都更可读。括号清楚地表明ID用作方法，事件处理程序的ID位于选择器中，因此，如果您知道javascript的工作原理，一切都在那里。谢谢，这是我需要的示例。但是我无法在我的网站上完成。你的网站没有包含jQuery，或者其他任何东西，它只有impress.js？@piruchex请喜欢我的答案，按Up键。当你修复所有错误时，我会喜欢你的答案。将

attr（）

更改为

prop（）

并使用

prop（'disabled'，false）

非

null

。

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

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

$('#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);
});

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