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

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> 

我有两个锚PAG-next和PAG-分组，将控制其内容的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

这是通过一个小试验和错误为我工作。虽然我不确定这是否是最有效的解决方案。

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

     $('#leermat2 .pag-prev').on('click',function(){ 
      $('#leermat2').addClass('hide'); 
      $('#leermat2').removeClass('show'); 
      $('#leermat1').addClass('show'); 
      $('#leermat3').removeClass('show'); 
     }); 
     $('#leermat3 .pag-prev').on('click',function(){ 
      $('#leermat3').addClass('hide'); 
      $('#leermat2').addClass('show'); 
      $('#leermat1').addClass('hide'); 
      $('#leermat3').removeClass('show'); 
      $('#leermat1').removeClass('show'); 
     }); 

Answer 2

看起来像你的锚标签，你没有给它一个类。

<a href="pag-next">Next</a> 

然后，您继续在您的JQuery代码中向不存在的类添加点击函数。

$('.pag-next').on('click',function() 

尝试将class="pag-next"添加到您的定位标记。

Answer 3

你需要这个

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