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

1 个答案: