我使用的是addClass/removeClass和「data-」屬性來顯示/隱藏div。我如何添加下一個/上一個？

Question

我正在嘗試制定電子書模板。這是我目前所擁有的：http://jsbin.com/otakab/2/edit但是下一個/上一個不起作用。你能提供工作代碼嗎？

// Following function works 
$(function() { 
    $(".pageNumbers a").on("click", function(e) { 
    // Add highlight to the element clicked and remove highlighting from its siblings 
    $(this).addClass("highlight").siblings().removeClass("highlight"); 
    // Make use of our data attribute to show the correct page and hide the siblings 
    $($(this).data('page')).show().siblings(".page").hide();     
}); 

// Finally, dynamically click first page to start things off for the user 
//and provide proper highlighting and showing of text 
    $("#a-1").click(); 

}); 

// Following function DOES NOT WORK 
$(function() { 
$(".direction a").on("click", function(e) { 
// Trying to show the next/previous hidden div 
$($(this).data('page')).show().siblings(".page").hide(); 

}); 

}); 

Answer 1

從你的HTML，它看起來像所有你需要做的就是添加e.preventDefault()您$('a').on('click',...)代碼：

http://jsfiddle.net/juQCz/

$(".direction a").on("click", function(e) { 
    e.preventDefault(); 
    $($(this).data('page')).show().siblings(".page").hide(); 
});