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

Answer 2

在你的锚标签中看起来你没有给它上课。

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

然后继续使用JQuery代码将click函数添加到不存在的类中。

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

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

Answer 3

通过一些试验和错误，这对我有用。虽然我不确定这是否是最有效的解决方案。

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

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

3 个答案: