Skip to main content | Turn off styling Default page style

Question & Answer index

Dynamic page content based on which tab is selected

Suppose you have a row of tabs on your page (or a column, whichever)... and you want to update what displays on your page when a user clicks a tab - but you do not want to change the URL - how do you do this?

Perhaps you want the tabs to change an image or load a video onto your page? The example below simply shows some text appearing onto the page, but what you choose to load is up to you.

Click a tab above!

To achieve this effect, here is the CSS for the horizontal tabs:

Here is the HTML for the tabs and the container for the content:

Here is the "tabClick" javascript function: