在第一个列表分页中显示项目

Question

我成功地对我的数据应用分页。但是我不知道如何使当前活动列表 - 在这种情况下，默认情况下显示第一个列表项，就像做选项卡一样。默认情况下显示第一个列表项的位置，无需有人先单击按钮/链接即可显示当前活动列表的内容。

以下是我目前使用的代码：-

1( 网页代码：

$(".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( 网页代码：

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