loading a specific div upon click in javascript?

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?

gilly3 · Accepted Answer · 2011-09-10 15:05:44Z

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/

edited Sep 10, 2011 at 15:05

answered Sep 10, 2011 at 14:50

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

paperfairy Over a year ago

hmm. it doesn't seem to work, despite duplicating your code. any tips?

gilly3 Over a year ago

Just visited your site, and it seems to be working now. You figured it out?

paperfairy Over a year ago

indeed, with the help of some other stackoverflow searches! thank you very much for your assistance in pointing me in the right direction.

Collectives™ on Stack Overflow

loading a specific div upon click in javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related