Creating Tabs in jQuery

Submitted by Yorkiebar on Saturday, July 12, 2014 - 08:56.

Language

Introduction: This tutorial is going to be teaching you how to create basic tabs using Javascript in HTML. Why Tabs? Tabs are very handy for professional looking websites, and allow you bunch a load of information in to a small space. A common use for javascript tabs is in control panels of user accounts, with different setting topics such as; Overview Billing Settings HTML: First we need the basic HTML template...

<html>
        <head>
 
        </head>
        <body>
 
        </body>
</html>

jQuery: We are going to be using jQuery for this tutorial which is an extension of Javascript. To add jQuery to our page, go to (http://jquery.com/download/), find the latest jQuery URLs, and add them in 'script' tags within our 'head' tags, like so...

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

HTML Container: We are going to use a basic wide and tall div to hold our content of the selected div. These containers go in the 'body' tags of our HTML file...

<div id='container1'></div>
<div id='container2'></div>

So if we select tab 1, container1 will show. Etc. Once we have our containers, we also need to create the tab options. I am going to have two user tab options; Account and Settings. Put these just above the containers...

<div id='1'>Account</div>
<div id='2' >Settings</div>

IMPORTANT: The id's of the div's are important, we will use these in the Javascript script. Javascript: Next we want to enable a javascript function to be ran once the user clicks on either of the tab divs, so we add a 'onclick' attribute to our tabs...

<div id='1' onclick='changeTab(this.id);'>Account</div>
<div id='2' onclick='changeTab(this.id);'>Settings</div>

Now we need to create that "changeTab" jQuery function. In our 'head' tags, create a new 'Script' tag section, and create the function accepting an input of an 'id'...

<script>
function changeTab(id) {
}
</script>

Just above the function create a new integer variable. This will hold the currently active tab id - so that the user can't select the same tab, since it's already showing...

var currentTab = 1;

Now for the function itself. First we ensure that the selected tab is the not the currently selected tab, if it is, we don't do anything with it...

function changeTab(id) {
        if (currentTab != id) {
        }
}

If it is a different tab to the currently active one, we first remove the CSS class (creating that next) 'showTab' from the current/previously selected tab. We then add a class 'hideTab' to it. We do the opposite for the newly selected tab (swapping tab...). Finally we remove the class of 'activeTab' from the previous/currently selected container tab, and add the same 'activeTab' class to the newly selected container div...

function changeTab(id) {
        if (currentTab != id) {
                $('#cont' + currentTab).removeClass('showTab');
                $('#cont' + currentTab).addClass('hideTab');
                $('#cont' + id).removeClass('hideTab');
                $('#cont' + id).addClass('showTab');
                $('#' + currentTab).removeClass('activeTab');
                $('#' + id).addClass('activeTab');
                currentTab = id;
        }
}

The last line of the above script; Set the globally available 'currentTab' variable to the new active tab id. CSS: Now we just need the CSS classes;

.activeTab {
        background-color: #007bae;
}
 
.showTab {
        display: block;
}
 
.hideTab {
        display: none;
}

ActiveTab is the currently active tab and has a different coloured background to the standard tabs. showTab enables the display of the container of information hideTab sets the visibility (display) of not currently containers to 'none'/invisible.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

47 views