Member Avatar for silvercats

I have javascript:- when we click on the 'home' link it shows home stuff,then when we click the 'about' link it shows the about related things. How to make this only to have one button and that 1 button should be able to change links on clicks. Here is the code.

    <script type="text/javascript">
    function show(page)
    {
    var html = "";
    switch(page)
    {
    case "home": html ='All the stuff of the page ';break;
    case "about": html = ='All the stuff of the pahe break;
    case "contact": html = "This is the contact page
    ...";break;
    }
    document.getElementById('container').… = html;
    }
    </script>



</head>
<body>
<div id="container">This is the homepage
...</div>
<a href="#" title="Home" onclick="show('home');return false">Home</a>
<a href="#" title="About" onclick="show('about');return false">About</a>
<a href="#" title="Contact" onclick="show('contact');return false">Contact</a>
</body>
Edited by Dani because: Formatting fixed
  • 3 Contributors
  • 4 Replies
  • 207 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by ryantroop
Member Avatar for JorgeM

What do you mean exactly by... "and that 1 button should be able to change links on clicks. " I dont understand that statement...

Member Avatar for silvercats

it is like an arrow imaged button that cycles through the links/dives, instead of 4 link above. So one button will go through all the DIVs on each clicks.

Member Avatar for JorgeM

hmm.. i dont think i've come across that before. So you are saying that one button will change its behavior every time you click on it..

I think that would be relatively easy. On each click event, change the button's value. The javascript/jQuery would be pre-written to perform some action based on the current value of the button...

i'm out for the night, but will take a look at this tomorrow if someone else hasnt come up with some other suggestions..

Member Avatar for ryantroop

You have a few options...

In your content area you can have your pages pre-populated in container divs with an ID and set to display:none. Then, with selections you "unhide" them, and hide the other(s). You could even keep a global to know which one you are on...

Alternatively, you can do a synchronous ajax call to a server page and set the innerHTML of the content area.

I would encourage you do not do this. Hiding all content and having it only displayable through JScript is a bit of a no-no... though JScript is so pervasive and common that it's unlikely you will come across anyone with scripting turned off/etc... but it's still good practice to not have your script intrude on your content...

I would also encourage you to not do this in a single "superfunction" and catch it all in a switch.
You could do a switch, but allow the switch to call helper functions (or even a helper function that passes in a variable... which you could simply do to bypass the switch all together...).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.