Home How To How to create horizontal tab window in html using JavaScript and CSS – progrramers

at
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

Share To:
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.

How To

Post A Comment:

6 comments:

  1. Devi.Angularjs5 August 2020 at 21:30

    IEEE Final Year projects Project Centers in India are consistently sought after. Final Year Students Projects take a shot at them to improve their aptitudes, while specialists like the enjoyment in interfering with innovation. For experts, it's an alternate ball game through and through. Smaller than expected IEEE Final Year project centers ground for all fragments of CSE & IT engineers hoping to assemble. Final Year Projects for CSE It gives you tips and rules that is progressively critical to consider while choosing any final year project point.

    JavaScript Online Training in India

    JavaScript Training in India

    The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

    ReplyDelete
  2. AlayaSEO19 January 2021 at 20:52

    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
  3. Unknown12 March 2021 at 10:35

    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
  4. July Kieu25 March 2021 at 21:42

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

    ReplyDelete
  5. jon10 June 2021 at 12:54

    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
  6. mathew21 December 2021 at 03:29

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

    ReplyDelete

Subscribe to: Post Comments (Atom)