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
  • 236 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by ryantroop

Dani AI

Generated

Single-button cycle pattern — keep an ordered set of “views” and a numeric index that advances on each click. Use a real <button> (not href="#") so keyboard/semantics work out of the box, attach an event listener, and update the visible view by swapping in a template or fetched HTML. This implements the arrow-button behavior asked by , follows the state-change idea from , and respects ’s note to think about progressive enhancement and content accessibility.

A minimal, modern sketch using template elements and an index:

const templates = [...document.querySelectorAll('template[data-view]')];
let idx = 0;
const btn = document.getElementById('cycle');
const container = document.getElementById('container');

function show(n) {
  idx = (n + templates.length) % templates.length;
  container.innerHTML = templates[idx].innerHTML;
  btn.setAttribute('aria-label', 'Next: ' + templates[(idx + 1) % templates.length].dataset.view);
  history.replaceState({view: templates[idx].dataset.view}, '', '#' + templates[idx].dataset.view);
}

btn.addEventListener('click', () => show(idx + 1));

Accessibility and UX considerations: add aria-controls on the button pointing to the container, update an aria-live="polite" region (or the button’s aria-label) with the name of the next view, and move focus into the newly shown content (e.g., focus the first heading or a container with tabindex="-1"). Use history.pushState/replaceState (or hashes) so back/forward navigation matches visible content.

Practical tips and gotchas: keep a usable server-rendered fallback or visible links for non-JS users so content stays indexable; lazy-load large views with fetch and cache them instead of embedding everything; debounce very fast clicks; avoid inline onclick; and test keyboard and screen-reader behaviour. This gives the single-button cycle requested while maintaining accessibility, SEO, and maintainability.

Recommended Answers

All 4 Replies

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.