单击javascript加载特定的div？

Question

I have no idea as to how to ACTUALLY word this, so this might be confusing, sorry.

I have a page here: http://dl.dropbox.com/u/3264697/calc/v2/index.html

At the top, you see a menu, with several different functions - each on their own seperate page. It can be represented as such:

A | B | C | D

where | denotes a page,

ALL of the functions USED to be on one page, as such:

A + B + C + D

A was visible when the link was clicked, and B,C and D were triggered upon clicking them.

clicking on one of those functions would load that div and hide the current one - so one could switch back and forth between pages without having to load another page. I changed it because loading times were too long.

However, now I want to sort of change it back. I would like to result to be like this:

A + B + C | D

However, when on page D, if I click link B, div A will load (because its the default div on a separate page)

Is there a way to influence which div loads when a link is clicked?

Answer 1

I see you've got jQuery in your page, so I'll use that to simplify things. You would add a click handler to your link to show its corresponding div and hide the others. Give your links and divs ids and give your divs a common class:

$("#linkId").click(function() {
    $(".tabContent").hide();
    $("#tabContentId").show();
    return false;
});

Edit: To set click handlers on all the links at once, you could specify the id of its corresponding div as a custom attribute in the link. Then bind all the links that have that custom attribute set:

$("a[contentId]").click(function() {
    $(".content").hide();
    $("#" + this.getAttribute("contentId")).show();
    return false;
});

Working demo: http://jsfiddle.net/gilly3/fyRA4/