分頁與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/

的，如果工程，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語句可以被刪除。