もっと読み込み前のコンテンツを隠す

4つの新しいコンテンツを表示するときと同じように、以前の4つを隠していたときと、最初に戻ったときにjqueryを使用してこのコードを使用しました。カルーセルのように。もっと読み込み前のコンテンツを隠す

現在、「読み込み」をクリックすると、すべてのコンテンツが準備されています。

<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は、私はあなたが歓迎の仲間です –

まさに必要だった多くの感謝:) – 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>

もちろん、セットを組み合わせてページを置くことができますoadコードとあなたのボタンは同じ文書内の関数をクリックしてコードをより速く動かすことができますが、私はその2つを分けることにしました。当然の

出典

2017-06-04 19:14:40 drtechno

あなたも

出典

2017-06-04 19:23:08 drtechno

もっと読み込み前のコンテンツを隠す

答えて

関連する問題