加載更多隱藏以前的內容

我有這個代碼使用jquery，因爲我做什麼時候顯示4個新內容它隱藏了前面的4，當它到達結尾回到開頭。像旋轉木馬一樣。加載更多隱藏以前的內容

當前當您點擊加載更多時，它會保持所有內容準備好，當前和以前。

<html> 
<head> 

<style> 

div { 
    display:none; 
    padding: 10px; 
    border-width: 0 1px 1px 0; 
    border-style: solid; 
    border-color: #fff; 
    box-shadow: 0 1px 1px #ccc; 
    margin-bottom: 5px; 
    background-color: #f1f1f1; 
} 


</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 

<body> 

<div>Content</div> 
<div>Content 1</div> 
<div>Content 2</div> 
<div>Content 3</div> 
<div>Content 4</div> 

<div>Content 5</div> 
<div>Content 6</div> 
<div>Content 7</div> 
<div>Content 8</div> 
<div>Content 9</div> 
<div>Content 10</div> 



<a href="#" id="loadMore">Load More</a> 

<script> 
$(function() { 
    $("div").slice(0, 4).show(); 
    $("#loadMore").on('click', function (e) { 
     e.preventDefault(); 
     $("div:hidden").slice(0, 4).slideDown(); 
     if ($("div:hidden").length == 0) { 
      $("#load").fadeOut('slow'); 
     } 
     $('html,body').animate({ 
      scrollTop: $(this).offset().top 
     }, 1500); 
    }); 
}); 



</script> 
</body> 
</htmL>

來源

2017-06-04 Bruno Andrade

，我認爲更好的方式來做到這一點是使集，然後用這些集工作... 我必須做出一些改變，給你的想法... 結賬，讓我知道這是你想要的一樣嗎？

$(function() { 
 

 

 
    $(".set").first().show(); 
 

 
    $("#loadMore").on('click', function(e) { 
 
    e.preventDefault(); 
 

 
    $(".set:visible").slideUp(); 
 
    $(".set:visible").next().slideDown(); 
 

 

 
    if ($(".set:visible").length == 1) { 
 
     $(".set:visible").slideUp(); 
 
     $(".set").first().slideDown(); 
 
    } 
 

 

 
    $('html,body').animate({ 
 
     scrollTop: $(this).offset().top 
 
    }, 1500); 
 
    }); 
 
});

div { 
 
    //display:none; 
 
    padding: 10px; 
 
    border-width: 0 1px 1px 0; 
 
    border-style: solid; 
 
    border-color: #fff; 
 
    box-shadow: 0 1px 1px #ccc; 
 
    margin-bottom: 5px; 
 
    background-color: #f1f1f1; 
 
} 
 

 
.set { 
 
    display: none; 
 
}

<html> 
 

 
<head> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <div class="set"> 
 
    <div>Content 1</div> 
 
    <div>Content 2</div> 
 
    <div>Content 3</div> 
 
    <div>Content 4</div> 
 
    </div> 
 

 
    <div class="set"> 
 
    <div>Content 5</div> 
 
    <div>Content 6</div> 
 
    <div>Content 7</div> 
 
    <div>Content 8</div> 
 
    </div> 
 

 
    <div class="set"> 
 
    <div>Content 9</div> 
 
    <div>Content 10</div> 
 
    <div>Content 11</div> 
 
    <div>Content 12</div> 
 
    </div> 
 

 

 

 
    <a href="#" id="loadMore">Load More</a> 
 

 
</body> 
 

 
</htmL>

來源

2017-06-04 20:45:18 Shehzad

非常感謝謝赫扎德正是我需要什麼 –

歡迎您的兄弟:) – Shehzad

你必須做的是在每個div內容部分，你必須在該div容器中有一個按鈕觸發特殊事件。

，你應該去了解這個的東西，如：

<div id="view1"> <h1>what ever your content is.<h1> 
        <p> then lets put a button below this 
      It could be housed in a paragraph, div or table container 
      how ever you want</p> 
      <p align="center"> <button id="hide1">Next </button> </p> 

    </div>

你的java是這樣的每個按鈕的觀點：

 <script> 



     $(document).ready(function(){ 
     $("#hide1").click(function(){ 
      $("#view1").hide(); 
      $("#view3").hide(); */ and list all the div you want to keep hidden 
      $("#view4").hide(); 
     $("#view5").hide(); 
     $("#view6").hide()  
      $("#view2").show(); 
     }); 

      }); 




      </script>

，那麼你就需要一個腳本部分來定義你的頁面，所以它會在頁面加載時執行

 <script> 
      $(document).ready(function(){ 

     $("#view2").hide(); 
     $("#view3").hide(); 
     $("#view4").hide(); 
     $("#view5").hide(); 
     $("#view6").hide(); 

     }); 
     </script>

當然你可以結合這些集合並把頁面l oad代碼和你的按鈕在相同的文檔就緒函數中單擊函數以使代碼運行得更快，但是我決定將它們分開，這樣我可以更好地解釋它。

來源

2017-06-04 19:14:40 drtechno

當然你可以使用引導模式做一些事情的

太

來源

2017-06-04 19:23:08 drtechno

加載更多隱藏以前的內容

回答

相關問題