Posts

Showing posts from March, 2009

Pure Accessible JavaScript Tabs

Found some code I did a while ago (pre jQuery) of a simple tabbed navigation implementation using JavaScript and basic CSS. Posting if anyone is interested. HTML <ul id="tabnav"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div id="tabs"> <div id="tab1"><a name="tab1"></a> <h1>Tab 1</h1> This is the contents of Tab 1 </div> <div id="tab2"><a name="tab2"></a> <h1>Tab 2</h1> This is the contents of Tab 2 </div> <div id="tab3"><a name="tab3"></a> <h1>Tab 3</h1> This is the contents of Tab 3 </div> </div> CSS #tabnav { width: 100%; overflow: hidden; list-style-type: none; margin: 0; pad