Skip to main content

Creating Multiple Tabs in HTML

By

HTML Document is here:-

<!DOCTYPE html>
<html>
    <head>
        <title>Tabs</title>
        <link rel=alternate href="hello.html" hreflang=en type=text/html title="English HTML">
        <link type="text/css" href="tabs.css" rel="stylesheet" />
        <meta charset="UTF-8"/>
    </head>
    <body style="margin: 0;">
    <center>
        <script src="tabs.js"></script>
        <ul id='tabs'>
            <li><a href="#one">Tab 1</a></li>
            <li><a href="#two">Tab 2</a></li>
            <li><a href="#three">Tab 3</a></li>
            <li><a href="#four">Tab 4</a></li>
            <li><a href="#five">Tab 5</a></li>
        </ul>
        <div id='one' class="tabContent">
            <p>Tab One</p>
        </div>
        <div id='two' class="tabContent">
            <p>Tab Two</p>
        </div>
        <div id='three' class="tabContent">
            <p>Tab Three</p>
        </div>
        <div id='four' class="tabContent">
            <p>Tab Four</p>
        </div>
        <div id='five' class="tabContent">
            <p>Tab Five</p>
        </div>
    </center>
</body>
</html>

 Here is the JavaScript

var tabLinks=new Array();
var contentDivs=new Array();
onload=function init(){
    var tabListItems=document.getElementById('tabs').childNodes;
    for(var i=0; i<tabListItems.length; i++){
        if(tabListItems[i].nodeName=="LI"){
            var tabLink=getFirstChildWithTagName(tabListItems[i], "A");
            var id=getHash(tabLink.getAttribute('href'));
            tabLinks[id]=tabLink;
            contentDivs[id]=document.getElementById(id);
        }
    }
    var i=0;
    for(var id in tabLinks){
        tabLinks[id].onclick=showTab;
        tabLinks[id].onfocus=function(){
            this.blur();
        };
        if(i==0)
            tabLinks[id].className='selected';
        i++;
    }
    var i=0;
    for(var id in contentDivs){
        if(i!=0)
            contentDivs[id].className="tabContent hide";
        i++;
    }
}
function showTab(){
    var selectedId=getHash(this.getAttribute('href'));
    for(var id in contentDivs){
        if(id==selectedId){
            tabLinks[id].className='selected';
            contentDivs[id].className='tabContent';
        } else{
            tabLinks[id].className='';
            contentDivs[id].className='tabContent hide';
        }
    }
    return false;
}
function getFirstChildWithTagName(element, tagName){
    for(var i=0; i<element.childNodes.length; i++){
        if(element.childNodes[i].nodeName==tagName)
            return element.childNodes[i];
    }
    return null;
}
function getHash(url){
    var hashPos=url.lastIndexOf('#');
    return url.substring(hashPos+1);             
}

And Here is the CSS

ul#tabs{
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    font-size: 1.2em;
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;
    width: 750px;
}

ul#tabs li{
    float: left;
    padding: 0;
    margin: 0 2px 0 0;
}

ul#tabs li a{
    color: white;
    margin: 0;
    padding: 5px 20px;
    background-color: #3b5998;
    border-top: 6px #3b5998 solid;
    font-weight: bolder;
    display: block;
}

ul#tabs li a:hover{
    color: white;
    background-color: #294a8f;
    border-top: 6px #294a8f solid;
    text-decoration: none;
}

ul#tabs li a.selected{
    color: white;
    background-color: #294a8f;
    border-top: #294a8f solid;
    border-bottom: 3px #294a8f solid;
    text-decoration: none;
}

div.tabContent{
    width: 710px;
    clear: both;
    border: 10px #294a8f solid;
    padding: 10px;
    margin: 0;
}

div.tabContent.hide{
    display: none;
}

Comments

Post a Comment

Popular posts from this blog

Java Program to calculate the Run Rate per over in a cricket match

By
import java.io.*; import java.util.*; public class RunRate{     Scanner scan=new Scanner(System.in);     int runs, balls;     float runRate;     public void input(){         try{             System.out.println("Enter Runs Scored: ");             runs=scan.nextInt();             System.out.println("Enter Balls Delivered: ");             balls=scan.nextInt();         }         catch(NumberFormatException e){             System.out.println("Error Code: "+e);             System.exit(0);   ...
Post a Comment
Read more

Vanilla Javascript each()

By
JQuery's each() is very useful when iterating through elements. But you don't want to use JQuery in your project you can simply add the following javascript code which works somewhat similar to the JQuery's each function. Here the fnc parameter is the function string which is converted to a valid function call replacing all the $(this) with this /**  * This function binds a particular function to every element with the specified selector. It is somewhat same as JQuery's each() with less functionality  * @param {String|DOMElement} selector  * @param {Function} fnc  */ function each(selector, fnc) {     var elem;     if (typeof selector === "string") {         elem = $_(selector);     } else {         elem = selector;     }     fnc = (fnc.toString().replace("$(this)", "elem") + "();").replace("function () {", "").replac...
Post a Comment
Read more

Java Program to display Welcome Message

By
import java.io.*;// I/O package imported. public class Welcome{        //class name is "Welcome"     public Welcome(){      //constructor declaired to print the message.         System.out.println("Welcome to Java Programming Language!");/* System.out.println is used for output. Welcome Message is written within " ".*/     }//display() closes here.     public static void main(String[] args){        //main() is declaired to declair an object in it.         Welcome obj=new Welcome();  //Object "Obj" is bean created.     }//main() closes. }//class "Welcome" ends here. Above program displays the message which is written by you in " ".  In programs "/*" and "*/" are use for multiple line comment(s) and "//" is use for single line comment. Code line "Welc...
Post a Comment
Read more