Question

我成功地可以对我的数据应用分页。但我不知道如何制作当前活动的List - 在这种情况下，第一个列表项默认显示为执行制表符。默认情况下显示第一个列表项而不需要有人单击按钮/链接以显示当前活动列表的内容。

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

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();添加到脚本中即可。

它将显示活动选项卡的内容

＆＃13;

$( ".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()
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: