javascript - 显示/隐藏内容而不重新加载页面

Question

我有三个内容框，我想使用控件显示和隐藏它们。HTML 如下:

<div id="leermat1"> 
  Content here 
  <a class="pag-next">Next</a>
 <a class="pag-prev">Previous</a>
</div>
<div id="leermat2"> 
  Content here 
  <a class="pag-next">Next</a>
 <a class="pag-prev">Previous</a>
</div>
<div id="leermat3"> 
  Content here 
  <a class="pag-next">Next</a>
 <a class="pag-prev">Previous</a>
</div>

我有两个 anchor pag-next 和 pag-prev，它们将控制哪些内容 div 在任何给定点应该可见:

我想编写jquery，例如，当单击#leermat1“pag-next”时，它会隐藏#leermat1并显示#leermat2。然后，当#leermat1 隐藏且#leermat2 显示时，当单击“.pag-next”时，它会隐藏#leermat2，并显示#leermat3。

“pag-prev”也应该以同样的方式工作。

我从以下开始，但不知道从这里开始。

$(document).ready(function() {
    $('.pag-next').on('click',function() {
        $('#leermat1').addClass('hide');
        $('#leermat2').addClass('show');
    });
});

还有一件事是“.pag-next”在显示#leermat3后应该停止运行。

Answer 1

你需要这个

$('[class^=pag-]').click(function() {
    var elem = $('[id^=leermat]').filter(":visible"); // take the visible element
    var num = Number(elem[0].id.match(/\d+$/)[0]); // take the number from it
    var step = $(this).is('.pag-next') ? 1 : -1; // ternary operator
    $('#leermat'+ (num + step)).show(); // show next or back
    elem.hide(); // hide the visible element
});