加载更多隐藏以前的内容

我有这个代码使用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

加载更多隐藏以前的内容

回答

相关问题