顯示/隱藏內容不重新加載頁面

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