Mehr laden Vorherige ausblenden Inhalt

Ich habe diesen Code mit jquery, wie ich, wenn 4 neue Inhalte anzeigen, versteckte es die vorherigen 4 und wenn es das Ende erreicht, an den Anfang zurück. Wie ein Karussell.Mehr laden Vorherige ausblenden Inhalt

Derzeit, wenn Sie auf mehr laden klicken, werden alle Inhalte bereit, aktuelle und vorherige.

<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>

Quelle

2017-06-04 Bruno Andrade

Ich denke, ein besserer Weg, dies zu tun ist, um die Sätze zu machen und dann mit diesen Sätzen arbeiten ... ich einige Änderungen vornehmen müssen Sie Idee geben, ... Kasse und lassen Sie mich wissen, das ist das gleiche, was Sie wollen?

$(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>

Quelle

2017-06-04 20:45:18 Shehzad

Vielen Dank Shehzad war genau das, was ich brauchte –

Sie sind willkommen, bro :) – Shehzad

, was Sie tun müssen, ist an jeder div Inhaltsbereich Sie auf eine Schaltfläche in diesem div Behälter haben, die ein besonderes Ereignis auslösen.

Sie sollten wie etwa das mit etwas gehen:

<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>

Ihre Java, wie dies für jede Schaltfläche Ansicht aussehen:

 <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>

dann werden Sie ein Skript Abschnitt benötigen, um Ihre Seite zu definieren, , so wird es auf Seite Last

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

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

     }); 
     </script>

natürlich führen Sie die Sets kombinieren können und die Seite l setzen Oad-Code und Ihre Tasten klicken Funktionen in der gleichen Dokument bereit, um den Code schneller laufen zu lassen, aber ich beschloss, die beiden zu trennen, damit ich es besser erklären könnte.

Quelle

2017-06-04 19:14:40 drtechno

man natürlich etwas mit Bootstrap-modal tun könnte zu

Quelle

2017-06-04 19:23:08 drtechno

Mehr laden Vorherige ausblenden Inhalt

Antwort

Verwandte Themen