How to Create a Simple Tab Based Navigation With Jquery

Tab based navigation is where we keep all the menu items in a single page and display and hide them according to user activities.

 

Tab based navigation is essential when you have to display high volume of content inside small screen space. With tabs you can load most of your content inside a single page and display and hide them whenever you want without refreshing the whole page. Also tab based navigation informs the user about what part of the application you are in and what are the other items you can visit.

 

Lets start by creating a container for our tabs. I have used a div called tabbar as the container for tab menu items and tab content.
Then i have created 2 divs called tabContainer and tabcontent. Div called tabContainer is used for tab menu items and tabcontent for content of that tab.

<div id="tabbar">
	<div id="tabContainer">
		<div class="tabContainerUl"></div>
	</div>
	<div id="tabcontent">
		<div class="tabcontent_inner"></div>
	</div>
</div>

 

Each tab menu item should be in the following format.

• Each tab menu item should be inside a div with the class tabMenuItem.
• Each div should have an anchor(<a>) tag inside.
• href attribute should have a unique id.

 

<div class="tabMenuItem">
<a href="#tab1">Tab Menu Item 1</a>
</div>

 

• Each tab content item should be inside a div and it should have the id as same as the name of tab menu item.
• Inside the div you can have any content you want. I have used an unordered list.

 

<div id="tab1">
	<ul class="side-nav">
		<li>Tab Menu 1 Item</li>
	</ul>
</div>

 

• First we have to hide all the tab contents.
• Class hidetab is added to all the tab contents to hide them.
• Default active tab will be #tab1. So the class hidetab is removed and displaytab is added to show the initial tab content.

 

    // Hide all the tabs
    $(".tabcontent_inner>div").addClass('hidetab');
    // Set the default active tab
    $("#tab1").removeClass('hidetab');
    $("#tab1").addClass('displaytab');

 

• Next we have to specify what happens when you click a tab menu item.
• When you click the tab menu it will try to redirect to the location in href attribute. To prevent that we have to use e.preventDefault() function.

$(".tabContainerUl div a").click(function (e) {
        e.preventDefault();

 

• Next we have to hide all the tab content when the tab menu item is clicked.

        // Hide all the tabs when the tab is clicked
        $(".tabcontent_inner>div").removeClass('displaytab');
        $(".tabcontent_inner>div").addClass('hidetab');

 

• Then we display the content of clicked tab by using the following code.

        // Display the clicked tab
        var hre=$(this).attr('href');
        $(hre).addClass('displaytab');

 

• Next we change the active tab to the clicked tab and make other tabs inactive.

        // Remove all currently active tabs
        $('.tabContainerUl>div a').each(function(index) {
            $(this).removeClass('displayActive');
        });
        // Activate the clicked tab
        $(this).addClass('displayActive');
    });

 

<link type="text/css" rel="stylesheet" href="tab.css" />
<script src="jquery.js" type="text/javascript"><></script>
<script src="tab.js" type="text/javascript"><></script>
<div id="tabbar">
	<div id="tabContainer">
		<div class="tabContainerUl">
			<div class="tabMenuItem">
                        	<a href="#tab1">Tab Menu 1</a>
			</div>
			<div class="tabMenuItem">
                        	<a href="#tab2">Tab Menu 2</a>
			</div>
			<div class="tabMenuItem">
                        	<a href="#tab3">Tab Menu 3</a></div>
			</div>
		</div>
	</div>
	<div id="tabcontent">
		<div class="tabcontent_inner">
			<div id="tab1">
				<ul class="side-nav">
					<li>Tab Menu 1 Item</li>
				</ul>
			</div>
			<div id="tab2">
				<ul class="side-nav">
					<li>Tab Menu 2 Item</li>
				</ul>
			</div>
			<div id="tab3">
				<ul class="side-nav">
					<li>Tab Menu 3 Item</li>
				</ul>
			</div>
		</div>
	</div>
</div>

$(document).ready(function(){
    // Hide all the tabs
    $(".tabcontent_inner>div").addClass('hidetab');
    // Set the default active tab
    $("#tab1").removeClass('hidetab');
    $("#tab1").addClass('displaytab');
    $(".tabContainerUl div a").click(function (e) {
        e.preventDefault();
        // Hide all the tabs when the tab is clicked
        $(".tabcontent_inner>div").removeClass('displaytab');
        $(".tabcontent_inner>div").addClass('hidetab');
        // Display the clicked tab
        var hre=$(this).attr('href');
        $(hre).addClass('displaytab');
        // Remove all currently active tabs
        $('.tabContainerUl>div a').each(function(index) {
            $(this).removeClass('displayActive');
        });
        // Activate the clicked tab
        $(this).addClass('displayActive');
    });
});