Wednesday, February 10, 2010

Simple HTML Tabs

Ever wondered how those tabs are created in html? You can create tabs very easily using html list elements

Here is a screenshot of simple html tabs

All you really need here is to create a unordered list (UL) with class attribute set to "nav" and the list element (LI) with class attribute set to "selected" for the tab you need selected.

    ul.nav { border-bottom:1px solid gray; }

    ul.nav li {
        padding:5px 5px 5px 5px;
        border:1px solid gray;
    ul.nav li.selected {
<ul class="nav">
    <li class="selected">Tab 12
    <li>Tab 2<li>
    <li>Tab 3<li>
    <li>Tab 4<li>

The above html was generated using vim - for those who are interested, vim can generate html with syntax highlighting with a simple command

:runtime! syntax/2html.vim

1 comment:

  1. It draws OK in IE, but clicking on the tabs doesn't change the selected tab. It doesn't draw correctly or function at all in Chrome or Firefox.