Hello Programmers! Welcome to brand new episode of HTML, CSS and JavaScript ‘How To’ series on progrramers. This post will explain ‘How to create horizontal tab window in html using JavaScript and CSS’. I am not a big fan of Bootstrap and jQuery therefore I’ll create the Horizontal Tabs with navigation bar using pure CSS and JavaScript.

First of all, you can click on Try yourself button in below example and check what are we going to create and after that you will find all the require source code of this project. You can also bookmark the repository of progrramers GitHub community where you can find and download the source code of other projects.
If you like our posts please give thumbs up  👍 on our Facebook page and also share with your near n dears.



How to create horizontal tab window in html using pure JavaScript and CSS :

<div class="navbar">
        <ul>
            <li><a href="#" tab-name="tab-1" class="tab-link">Tab-1</a></li>
            <li><a href="#" tab-name="tab-2" class="tab-link">Tab-2</a></li>
            <li><a href="#" tab-name="tab-3" class="tab-link">Tab-3</a></li>
            <li><a href="#" tab-name="tab-4" class="tab-link">Tab-4</a></li>
            <li><a href="#" tab-name="tab-5" class="tab-link">Tab-5</a></li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="tab tab-1"></div>
        <div class="tab tab-2 hide"></div>
        <div class="tab tab-3 hide"></div>
        <div class="tab tab-4 hide"></div>
        <div class="tab tab-5 hide"></div>
    </div>
Try Yourself



So let’s start

HTML Explanation

Below is the HTML code that has to be defined in your code that create the DOM of navbar links and the blocks of contents (tab elements). When the links are click then only adjacent <DIV>  will display on browser and all other DIVs will be remain hidden. Please create an HTML file named ‘index.html’ and paste the below codes into it and save.

HTML Codes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>How to create tab window in html using JavaScript and CSS – progrramers</title>
    <style>
       /*-----Paste CSS Code Here----------*/
    </style>
</head>
<body>
    <div class="header">
        <h1>How to create tab window in html using JavaScript and CSS – progrramers</h1>
    </div>
    <div class="navbar">
        <ul>
            <li><a href="#" tab-name="tab-1" class="tab-link">Tab-1</a></li>
            <li><a href="#" tab-name="tab-2" class="tab-link">Tab-2</a></li>
            <li><a href="#" tab-name="tab-3" class="tab-link">Tab-3</a></li>
            <li><a href="#" tab-name="tab-4" class="tab-link">Tab-4</a></li>
            <li><a href="#" tab-name="tab-5" class="tab-link">Tab-5</a></li>
        </ul>
    </div>
    <div class="tab-content">
        </div>
        <div class="tab tab-2 hide"></div>
        <div class="tab tab-3 hide"></div>
        <div class="tab tab-4 hide"></div>
        <div class="tab tab-5 hide"></div>
    </div>
    <script>
      //JavaScript Codes Goes Here
    </script>
</body>
</html>

CSS Explanation

CSS will draw every elements as you desire. These codes should be placed between style tags into the head section.

CSS Codes

       *{box-sizing:border-box}
        body{margin:0;padding: 0;font-family: Verdana, sans-serif}
        /*---Navbar CSS Starts----*/
        .header{background-color: #fafafa;color:#434343}
        .header h1{margin:0;padding: 0;}
        .navbar{background-color: #0056c7;}
        .navbar ul{margin:0;list-style-type: none;overflow: hidden;}
        .navbar ul li{float:left}
        .navbar a{color:#ffffff;text-decoration: none;display:inline-block;padding:14px 18px;transition: all .3s ease-in-out}
        .navbar a:hover{background-color: #ffffff;color:#0056c7}
        /*---Navbar CSS Ends----*/

        .tab-content{min-height:380px;border:5px solid #0056c7;border-top:0;position: relative;overflow: auto;}
        .tab-content div{margin-left:53px;min-height: 380px;position: absolute}
        .hide{display: none;}

.hide class is predefined CSS class to hide the elements dynamically

JavaScript Explanation

JavaScript code will fire the functions to hide and unhide the content-tabs when you click on navbar links. Here one thing also is to be mark that don’t get confused with ‘$’ it not a jQuery function variable. This is self defined function which is stored in ‘$’ variable which target the HTML elements using the CSS kind of selector.

JavaScript Codes

var $ = function(_){return document.querySelectorAll(_)}; //donot confuse, this is not jQuery...
            for(var i=0;i<$('.tab-link').length;i++){
                $('.tab-link')[i].onclick = function(){
                //    alert(this.getAttribute("tab-name"));
                    $('.tab-content>.tab').forEach(element => {
                        element.classList.add("hide");
                    });
                    $('.'+this.getAttribute("tab-name"))[0].classList.remove('hide');
                }
            }


Code Explanation


$ = function(_){return document.querySelectorAll(_)}; This function expression is defined the '$' varialbe which is used to target HTML DOMs.

for(var i=0;i<$('.tab-link').length;i++) loop query the length(count) of navbar links '.tab-link' and set the event function on it by looping itself on load.

forEach function loops the content <DIV> elements add the '.hide' class on each '<div class="tab tab-1">' So that every <DIV> elements become invisible.

$('.'+this.getAttribute("tab-name"))[0].classList.remove('hide'); this code fetch the value from tab-name attribute which is becomes a class selector of <DIV> elements and finally which class is matched that <DIV> become visible.

Hoping this post will usefull for you guys. Keep following progrramers : a web school and get latest updates. 
Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

5 comments:

  1. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info. Ramen Leuven

    ReplyDelete
  2. It is very important to keep your family and valuable possessions safe. Safe begins with choosing the right exterior security doors and safety fences. A strong, well-made door and/or fence will keep intruders out - and give you peace of mind. But before you decide to buy a door, there are 6 things you must know. steel security doors melbourne

    ReplyDelete
  3. Great posting, thanks for sharing with us!!
    Reference: V8Web-Faribault Web Design

    ReplyDelete
  4. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. embroidery keychains

    ReplyDelete
  5. This blog contains more useful information. Thanks for this Informative blog
    Pega application
    Pega platform

    ReplyDelete