26 Best ways to implement AJAX, CSS, and Javascript-based Tabs

Recently I was surfing the web for the best AJAX and CSS-based tabs, menus for one of my projects. In the process, I found some really good resources from fellow developers and thought to share the same with you all.

As you are aware that there are countless resources available on every topic in the world of the internet but only a handful of them are utility types. As a result, it is really hard at times to find the right resource from millions of websites that really suit our needs.

Keeping this predicament of my fellow developers in mind, I came up with this list which will really prove to be helpful to all of you.

Here is the list of examples are arranged randomly, show some love and Digg it if you really like it :)


AJAX Tabs (Rails Redux):

Source: http://actsasflinn.com/Ajax_Tabs/index.html

The purpose of doing Tabs in Ajax is not just to do something in Ajax. The context for which this is used is not for novelty. In this demo, we are using Ajax to load information that does not need to be retrieved every time the user pulls the record. The methods used here are to yield absolute control over where the content comes from, what conditions trigger action, and how the panes are presented.

This is really meant to be used in an application because the javascript and CSS are heavy if you are only using them on one page. However, if you consider them groundwork for using tabs throughout a larger application then they are pretty light compared to something like YUI.

Snippet Code for Simple AJAX Tabs with cool CSS Styles:

Source: http://www.developersnippets.com/?p=22

Hey, folks over there, here I came up with simple Ajax Tabs, you guys can show case your valuable content using tabs scenario that too with Ajax. This is a simple and elegant way of representing your content when your pages have tons of content to display. If you go through the code it’s simple and basic Ajax implementation, if you are a web developer it’s easy to understand. The example which I am attaching with this snippet, the article consists of index.html, ajax.js, tabs.css, and lastly the content page named contentpage1.html

Javascript Tabbar Component with rich API:

Source: http://www.scbr.com/docs/products/dhtmlxTabbar/

dhtmlxTabbar is a JavaScript tabbar control for creating a dynamic tab-navigation interface. This control lets you add nice looking and powerful multiline* tab bar to your site or web application.

The control can be easily initialized on a web page that makes the building of DHTML tabbed interface a breeze. Just assign any elements on your page (for example DIVs) to tabs of Tabbar, and it will automatically do all work for you – the component will switch these elements displaying them by clicking on the corresponding tab (see sample code for easy and fast initialization at the bottom of this page).

TabContainer – ASP.NET AJAX Control:

Source: http://ajax.asp.net/ajaxtoolkit/Tabs/Tabs.aspx

TabContainer is an ASP.NET AJAX Control that creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls.

Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content. The most recent tab should remain selected after a postback, and the Enabled state of tabs should remain after a postback as well.

Control Tabs:

Source: http://livepipe.net/projects/control_tabs/

Unobtrusive CSS tabs for Prototype.js

This script uses the Prototype javascript framework. You must include version 1.5 in your pages before including this script. This library is known to work in recent versions of all major browsers (IE 6/7, Firefox, Safari, Opera).

Accessible, unobtrusive JavaScript Tabs with jQuery:

Source: http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/

Here is a jQuery plugin that lets you create Javascript tabs very easily – once you assembled the HTML with just one line of JavaScript Code

Yahoo! UI Library: TabView

The TabView component is designed to enable developers to create navigate tabbed views of content. Check out the article on how to implement the YUI tab view/menu interface.

Tabtastic (Non AJAX):

Source: http://phrogz.net/JS/Tabtastic/index.html

This library is a simple way to implement tabs on your page using CSS, a little JS, and semantic markup which degrades gracefully on browsers with CSS unavailable or disabled.

Not only is it easy to use and accessible for screen-readers, but it supports multiple (nested, even) tabsets on the same page and allows users to bookmark the page loading to a specific tab.

A Different approach for Tab Menu (Non-AJAX):

Source: http://www.kollermedia.at/archive/2007/02/20/download-tabmenu-for-free/

If you want that the tabs are changing on click and not on mouseover -> then just change the onmouseover to onclick  Of course you can set a link to each Menu Tab – just set the linkurl in the href and delete the onclick=”return false;”

At the moment it’s not usable with disabled Javascript but I will fix this as soon I have time. If you want to activate the Tabs via Keyboard – just add an onfocus=”” with the same functions as the onmouseover in it. I’ve packed everything in 1 File – but you can also put the CSS in an external CSS file and the javascript in an external javascript file. There are a lot of other ways how you can do something like this but if you use more than one of these tabmenus, I think this is one of the best solutions.


DOMTab – Navigation tabs with CSS and DOMscripting (Non-AJAX):

Source: http://onlinetools.org/tools/domtabdata/

DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any “back to top” links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to.

New: If the URL of the page links directly to one of the tabs it gets automatically highlighted. You can define with an extra class if you want previous and next links or not. DOMtab uses Unobtrusive JavaScript and does not have any global functions or variables. This page uses DOMtab.

Ajax Project – Tabbed Page Interface:

Source: http://www.crackajax.net/tabs.php

Didn’t find what you want? Try our search
This project was inspired by forum contributor Nomadiq, based on an original CSS/Tab idea that can be found at http://nontroppo.org/test/t ab1.html

There are quite a few Javascript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from pagetab to pagetab without a page refresh? Here’s an example of a tabbed interface using Ajax to load the new pages.

We are going to use the AHAH functions described in the Metatag Grabber project to implement the interface.

JavaScript Tabifier (Non AJAX):

Source: http://www.barelyfitz.com/projects/tabber/

Automatically create an HTML tab interface using plug-and-play JavaScript. Cool script which is very easy to implement in no time. Must check it out.

DHTML Goodies: Tab Panes

Source: http://www.dhtmlgoodies.com/index.html?whichScript=tab-view

Nothing much to say about these cool tab panes, as you all know DHTML Goodies always rocks. This site has got even support form section for all the examples they host and trust me their support form for each script is simply superb. So check out that site for other stuff too.

Ajax Tabs Content script:

Source: http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

This tab content script uses Ajax to let you display a selection of external content on your page inside a DIV and via CSS tabs! We got our inspiration for this script from Yahoo’s new homepage, which employs such a concept to show news in an organized fashion.

Tab Pane control (Non-AJAX):

Source: http://webfx.eae.net/dhtml/tabpane/tabpane.html

This Tab Pane control is fairly similar to the tab system Tim Scarfe created for developer-x.com and the basic idea is the same. That idea is to be able to use a normal XHTML document structure and if the browser supports DOM level 1 then the structure of the elements is slightly adjusted and the className is changed for the tab-pane container so that the CSS rules specially defined for the tab are applied.

Ajax Workshop 2: Building Tabbed Content

Source: http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed-content/

In this workshop, we will be building a tabbed content browser that’s Ajax powered. Whenever a user clicks a tab the Ajax will communicate with the server and send back the appropriate data for that tab.

We will start this workshop off with the XHTML and CSS for the tabbed content browser. We will need 3 main IDs (one for the container, one for the content area, and one for the loading status) and 1 class (for the tabs).

The Zapatec Javascript Tabs Demos:

Source: http://www.zapatec.com/website/main/products/tabs/demo.jsp

This is the AJAX Tabs demo. It uses the Zapatec AJAX Transport layer to transfer the tab contents dynamically and JSON to define the contents. It fetches Tab contents only when they are needed. This method lets you reuse HTML code. You can think of it as a client/server-side include. You can easily create a Zapatec Tabs database-driven application using AJAX and JSON.

DOM Dynamic Tabs (Non-AJAX):

Source: http://www.ajaxlessons.com/2006/02/24/dom-dynamic-tabs/

DOM Dynamic Tabs is very easy simple to use, it can be used right out of the box with little code. The first thing that you need to do is create an instance of the Dynamic Tab object.

Create killer menus effortlessly!: CSS Tab Designer

Source: http://www.highdots.com/css-tab-designer/

CSS Tab Designer is unique and easy-to-use software to help you design CSS-based lists and tabs visually and without any programming knowledge required! Ready-made tab menu builder tool for designers and developers. Cool one must try it.

Light Weight Low Tech CSS Tabs (Non-AJAX):

Source: http://www.fiftyfoureleven.com/weblog/web-development/css/light-weight-css-tabs

An example of lightweight tabs is by combining the Sliding Doors method with the Mountaintop corners idea. The complete source is available for download, check this is also another cool menu.

DD Tab Menu  – 5 styles (Non AJAX):

Source: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

DD Tab Menu is a standards-compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearances, and plain HTML to implement the entire menu tabs and contents.
Module Tabs – Carousel:

Source: http://billwscott.com/carousel/carousel_tabs.html

Example of showing one page of content at a time in tabs. Each tab link scrolls to the page selected. Since all animation is turned off (animation speed = 0) then it just moves the desired content into view.

PAJAJ AJAX Tabs:

Source: http://www.wassons.org/pajaj/public/widget/AjaxTabWidget.php

PAJAJ is an object-oriented Ajax framework, created by Gilbert Hyatt, written in PHP5 for the development of event-driven PHP web applications.

CSS Tabs 2.0 (Non AJAX):

Source: http://unraveled.com/projects/css_tabs/

My goal was to build CSS tabs without using any images or hacks and with as little CSS as possible. Simple CSS Tabs and very easy to implement the same in any of your applications.

I think this article doesn’t end here, there are even more good tab-based interfaces and menus around the web. Why not check this huge collection of collected CSS-based Navigational Tabs Articles, Tutorials on list menus, navigations, and tabs.

Why not show some love and Digg it if you really like it :)

Scroll to Top