最初のページの項目を表示するページ区切り

Question

私は自分のデータにページネーションを適用することができます。しかし、私はどのように現在のアクティブなリストを作成するのか分からない - この場合、最初のリストItemはデフォルトでタブのように表示されます。現在のアクティブなリストの内容を表示するために、最初にボタン/リンクをクリックする必要なく、最初のリスト項目がデフォルトで表示されます。

以下は私の現在のコードは、私が使用している： -

1）HTMLコード：

$(".pagination li").click(function() { 
    $(this).toggleClass('active').siblings().removeClass('active'); 
    // hide all .block elements 
    $(".block").hide(); 
    // show .block with the same index as clicked li 
    $(".block").eq($(this).index()).show() 
}); 

2）CSSコード：

.pagination { 
    text-align: right; 
    margin: 0; 
    padding: 0; 
    margin: 0 0 10px; 
} 
.pagination li { 
    display: inline-block; 
    list-style: none; 
    padding: 10px 15px; 
    cursor: pointer; 
} 
.pagination li.active { 
    background: #003580; 
    color: white; 
} 

.block { 
    display:none; 
} 

3）HTMLコード：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="pagination"> 
    <li class="first active">1</li> 
    <li class="second">2</li> 
    <li class="third">3</li> 
</ul> 
<div class="block first">abc</div> 
<div class="block second">123</div> 
<div class="block third">!@#</div> 

誰かが私にこれを行う方法を教えてもらえますか？あるいは、これを行うための他の方法がありますか？

Answer 1

$(".block").eq($(".active").index()).show();をスクリプトに追加するだけです。

それが作品

$(".block").eq($(".active").index()).show(); 
 
$(".pagination li").click(function() { 
 
    $(this).toggleClass('active').siblings().removeClass('active'); 
 
    // hide all .block elements 
 
    $(".block").hide(); 
 
    // show .block with the same index as clicked li 
 
    $(".block").eq($(this).index()).show() 
 
});

.pagination { 
 
    text-align: right; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin: 0 0 10px; 
 
} 
 
.pagination li { 
 
    display: inline-block; 
 
    list-style: none; 
 
    padding: 10px 15px; 
 
    cursor: pointer; 
 
} 
 
.pagination li.active { 
 
    background: #003580; 
 
    color: white; 
 
} 
 

 
.block { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="pagination"> 
 
    <li class="first">1</li> 
 
    <li class="second">2</li> 
 
    <li class="third active">3</li> 
 
</ul> 
 
<div class="block first">abc</div> 
 
<div class="block second">123</div> 
 
<div class="block third">!@#</div>