使用 css 和 jquery 分页

Question

我主要想显示3个部分并以一种非常简单的方式对它们进行分页，就好像这是一个标签的情况。我需要使用的原则是：如果分页项目在第一个项目上有一个 class 活动，则显示第一个块。不过，我仍然坚持 javascript 逻辑。

我的html：

<ul class="pagination">
    <li class="first active">1</li>
    <li class="second">2</li>
    <li class="third">3</li>
</ul>
<div class="block first">page 1</div>
<div class="block second">page 2</div>
<div class="block third">page 3</div>

和javascript

$(".pagination li").click(function () {
    $(this).toggleClass('active').siblings().removeClass('active');
});

if ($(".pagination li.first").hasClass("active")) {
    $(".block.first").css("display" , "block");
}

else if ($(".pagination li.second").hasClass("active")) {
    $(".block.second").css("display" , "block");
}

这里是 fiddle：http://jsfiddle.net/p2e4nd97/1/

if 有效，elseif 无效。但我不确定这是正确的方法。看起来太冗长了。你能帮我吗？谢谢！

Answer 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()
});

您的 if 语句可以删除。

使用 css 和 jquery 分页

pagination with css and jquery

html

javascript

css

jquery

pagination