Jquery Tabs Without Jquery UI

Here is a compact way to replicate jQuery UI tabs without the UI. I wrote this code to account for unlimited tabs and to create dynamic "selected" class on the clicked item and removes the class when you click on another tab. This lends itself to easier styling of the tabs as well. It also degrades to show all the content if javascript is disabled. View Demo Here is the HTML Markup You can start any of the LIs with class="selected" to have that tab start as the selected item. The tab navigation is set up in the javascript. This way, if javascript is disabled the tabs go away and all the content in the tabs is displayed. Thanks to Kyle Geminden for this.

Here is the CSS You can change the last line here to match the LI that you want to display by default

#tabs { margin: 0; padding: 0; list-style-type: none; overflow: hidden; }
#tabs li { cursor: pointer; float: left; margin: 5px; padding: 5px; background: #EFEFEF; }
#tabs li.selected { background: #888888; }
#tabs-content { clear: both; }
#tabs-content.js > div { display: none; }
#tabs-content.js > #tab-content-1 { display: block; }

Here is the Javascript/jQuery

$('#tabs-content').before('
<ul id="tabs">
<li id="tab-1" class="selected">Tab 1</li>
<li id="tab-2">Tab 2</li>
<li id="tab-3">Tab 3</li>
</ul>
');

$('#tabs-content').addClass('js');        
        
        $("#tabs li").each(function() {
                
                $(this).click(function() {
                        var tabId = $(this).attr('id');
                        var tabId = tabId.split('-');
                        var tabContent = document.getElementById('tab-content-' + tabId[1]);
                        tabContent.style.display = 'block';
                        $(this).addClass('selected');
                        $(this).siblings().removeClass('selected');                     
                        $(tabContent).siblings().css('display','none'); 
                });
        
        });

UPDATE - March 25. 2012

So I have been asked to provide code that makes these tabs bookmarkable. Well...here it is! In order to get these to be bookmarked, I make up a $_GET variable that is specific to these tabs. So after the normal tab js code if you put this and the url is http://domain.com/?tab=1 this will overwrite the tab function and highlight the one you want. see: View Revised Demo there are direct links on this page to the tabs

if ( getQueryString('tab') != '' ) {
        // get the value of the query string var called "tab"
        var tab = getQueryString('tab');
        // remove all the "selected" classes from the LIs
        $('#tabs li').each(function() { $(this).removeClass(); });
        // based off of the tab in the query string, readd the "selected" class back to the appropriate tab
        $('#tabs li#tab-' + tab).addClass('selected');
        // hide all of the content divs
        $('#tabs-content > div').css({'display':'none'});
        // based off of the tab in the query string, make the selected tab visible
        $('#tabs-content #tab-content-' + tab).css({'display':'block'});
}

WHERE getQueryString(); is the function below

// http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx
function getQueryString(key, default_) {
        if (default_==null) default_="";
        key = key.replace(/[[]/,"[").replace(/[]]/,"]");
        var regex = new RegExp("[?&]"+key+"=([^&#]*)");
        var qs = regex.exec(window.location.href);
        if(qs == null)
                return default_;
        else
                return qs[1];
}