Tabbed pages

HTML & CSS
1

Hi guys I’m looking to create a two tabbed page where I have images as the two links that switch the content, with this I would like to have a current state for which ever page it is on. Below is currently what I have (the content is about the company the other content will be history)

<div id="aboutnav">
	<a id="about_btn" href="aboutting.html"></a>
	<a id="history_btn" href="aboutting.html"></a>
</div>
<div id="about">
<div id="aboutheader"><h3>ONE <img src="assets/ting_logo2.png" width="60" height="61" /> LEADS TO ANOTHER</h3>
<h3>Local legend has it that our eureka moment started in a bath.</h3>
<p>A bath of Jamaican grapefruit drink was 
brewing in the sun when someone asked
the question 'What we gonna do w'tis ting?'  </p>
</div>
<div id="bathtub"><img src="assets/bathtub.png" width="400" height="230" /></div>
<div id="clear"></div> 
<div id="aboutbody">
<p>It may not have happened quite like that…it was more of a happy accident at the 
Jamaican Guinness plant in 1976… but Ting was soon on everyone's lips in 
Jamaica and overseas.</p>

<p>In our first year we won the coveted Monde Selection Gold Medal in Belgium for our distinctive taste and quality and started showing the world the Ting we loved with our first export to Barbados.</p>

<p>We're now a name in over 20 countries worldwide with several more international awards to that name.</p>

<p>All this is a very good Ting for our Jamaican citrus industry. The rejuvenation of the market through everyone's desire for more natural juices has benefited hundreds of farmers with the purchase of grapefruit juice from, the Jamaica Citrus Growers Association.</p>

 
</div>

What would be the best way to this. I’ve had a look around but have only been able to find ones with tabs(text) rather than images and also doesn’t contain the current state. A tutorial or a helping hand on the code I currently have would be fantastic.

Thanks in advance :slight_smile:

2

Are you using JavaScript for these tabs? If so, it will ften add a class to the current tab, allowing you to alter the styles on that tab.

I think we need to see a live example of this.

3

I’m with ralph on this but I would suggest using jQuery for its implementation.

4

Hi,

Here’s a small example of swapping tabs with some simple JS and avoiding the heavy jquery library for a simple task. However if you are already using jquery then I would use one of their tab routines instead.

The example above will default to content displayed if JS is turned off so is good for accessibility although you may get the initial flash of content.

The tabs are text but you can just swap the text for a background image as indicated in the source.