<acidjs-xtabs width="100%" height="200" selectedtab="0" name="my-x-tab-01">
<acidjs-xtabs-pane label="Home" hint="Go to our homepage">
<h3>Home</h3>
<p>Lorem ipsum.</p>
</acidjs-xtabs-pane>
<acidjs-xtabs-pane label="About Us" hint="More info about us">
<h3>About Us</h3>
<p>Sed ut perspiciatis?</p>
</acidjs-xtabs-pane>
<acidjs-xtabs-pane label="Downloads" hint="Visit our downloads section">
<h3>Downloads</h3>
<p>At vero eos et accusamus.</p>
</acidjs-xtabs-pane>
<acidjs-xtabs-pane label="Contact Us" hint="Give us a shout">
<h3>Contact Us</h3>
<p>Howdy?</p>
</acidjs-xtabs-pane>
<acidjs-xtabs-pane label="Disabled Tab" hint="Give us a shout" enabled="false">
<h3>Disabled Tab</h3>
<p>Just a disabled tab.</p>
</acidjs-xtabs-pane>
<acidjs-xtabs-pane label="Yet Another Tab" hint="And Yet Another Tab">
<h3>Disabled Tab</h3>
<p>Lorem ipsum dolor sit amet.</p>
</acidjs-xtabs-pane>
</acidjs-xtabs>
[/sourcecode]
Have fun with the demo and feel free to modify and use the source code. If you like what I’m doing, follow me on Twitter or check my other posts about HTML5 Web Components, CSS3 or JavaScript.
© 2006 - 2023 Martin Ivanov