javascript - 使用 css 和 jquery 进行分页

Question

我主要想显示 3 个部分并对它们进行分页，以一种非常简单的方式，就好像它是一个选项卡的情况。 我需要使用的原则是:如果分页项在第一项上有一个事件类，则显示第一个 block 。不过，我仍然坚持使用 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 语句。