使用 css 和 jquery 进行分页

Question

我主要想显示 3 个部分并以非常简单的方式对它们进行分页，就好像这是一个选项卡的情况。 我需要使用的原则是：如果分页项在第一项上有活动的类，则显示第一个块。不过，我被困在 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");
}

这是一个小提琴：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 声明可以删除。