jquery - 我正在使用 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();
});