Tabbed navigation

Question

I\'m having real difficulty figuring how to do the following:

I want to have two tabs (horizontal next to each other), one for search (and labelled as such) and another

Answer 1

There is another way to this with pure css. The difficulty lies in preserving the 'active' state of a tab, and this can be done by using a radio input on the tab button. It is a bit hackish, but it works fine

The html would look something like this:

    

        
        Search
        

            
The search page
        
    
    

        
        Post
        

            
The post page
        
    

Notice the inputs and labels that will serve as buttons. (also note that I corrected your markup, you can only use li as direct child of an ul!!)

The css would look something like this:

input[name='tab'] {
    display: none;
}
input[name='tab'] ~ .content {
    display: none;
}
input[name='tab']:checked ~ .content {
    display: block;
}

By making combining the :checked selector (to detect the state of the 'tab button') and the sibling ~ selector, you can determine which tab page should be displayed.

I set up a small example for you as well: http://jsfiddle.net/j9YbW/