Question

I am trying to work out the template for an ebook. This is what I have at present: http://jsbin.com/otakab/2/edit But the next/previous doesn’t work. Can you supply working code?

// 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

From your HTML, it looks like all you need to do is add e.preventDefault() to your $('a').on('click',...) code:

http://jsfiddle.net/juQCz/

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