Voici le marquage HTML nécessaire :

<ul class="tabs">
        <li><a href="#tab1">Gallery</a></li>
        <li><a href="#tab2">Submit</a></li>
</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
        <!--Content-->
    </div>
</div>

Voir la démonstration.

Voici le marquage HTML pour utiliser SimpleTabs :

<div class="simpleTabs">
    <ul class="simpleTabsNavigation">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab3 (and so on)</a></li>
    </ul>
    <div class="simpleTabsContent">Content here to be called when "Tab 1" is clicked.</div>
    <div class="simpleTabsContent">Content here to be called when "Tab 2" is clicked.</div>
    <div class="simpleTabsContent">Content here to be called when "Tab 3" is clicked.</div>
</div>

PS : Il existe un script de gestion d’onglets sous la forme d’un plugin Mootools appelé également SimpleTabs écrit par Harald Kirschner.

L’effet est très sympathique (cf. démonstration) et le défilement doux est suffisamment fluide pour ne pas s’arrêter brusquement lorsqu’on passe rapidement la souris sur plusieurs lettres. A noter que le menu de droite peut recevoir autre chose que des lettres, ce qui peut permettre d’utiliser SliderNav pour réaliser une table des matières ou tout type de menus.  Via Taggle.