Tabs using HTML,CSS and jQuery

In this tutorial, I am going to show to How you can create tabs using HTML,CSS, and jQuery.

When did it use?

Tabs are a type of container layout this you can use for showing related data. It covers less space within your page

For example, You have a web page from where you are adding a new user, showing the list of users and editing them.

Here, you can use Tab for separating them by creating Add, List, and Edit tab.

Tabs using HTML,CSS and JQuery

 Demo    Download

Contents

  1. HTML
  2. CSS
  3. PHP
  4. jQuery

1.HTML

In HTML code, we’ll use an unordered list to acts as the tabs, and using div as our tab content sections. Storing div id in the anchor tag in the unordered list.

Tab Links

We create a div with class=”tabs”. Inside there an unordered list with class="tabs-list", each <li> tag have anchor tag whose link to div. For setting one tab to be active at a first time so we need to add class="active" to first <li> tag item.

<div class="tabs">
    <ul class="tabs-list">
        <li class="active"><a href="#tab1">Tab1</a></li>
        <li ><a href="#tab2">Tab2</a></li>
        <li ><a href="#tab3">Tab3<a/></li>
    </ul>

Tab Content

We created 3 divs, each with class="tab",(this number depends on how many tabs are in an unordered list). For displaying an active content section we need to add an active class on div ( class="tab active" ) And add id on divs.

<div class="tab1" class="tab active">
            <h3>Tab1</h3>
            <p>
                Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary


            </p>
        </div>
        <div id="tab2" class="tab">
            <h3>Tab2</h3>
            <p>
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my
</p>

        </div>
        <div id="tab3" class="tab">
            <h3>Tab3</h3>
            <p>
                The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens


            </p>
        </div>

    </div>

Completed Code

 <div class="tabs">
        <ul class="tabs-list">
            <li class="active"><a href="#tab1">Tab1</a></li>
            <li ><a href="#tab2">Tab2</a></li>
            <li ><a href="#tab3">Tab3<a/></li>
        </ul>

        <div id="tab1" class="tab active">
            <h3>Tab1</h3>
            <p>
                Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary


            </p>
        </div>
        <div id="tab2" class="tab">
            <h3>Tab2</h3>
            <p>
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my
</p>

        </div>
        <div id="tab3" class="tab">
            <h3>Tab3</h3>
            <p>
                The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens


            </p>
        </div>

    </div>

2.CSS

CSS code in detail –

Tab List items

We remove unordered list default style by setting list-style:none in class .tabs-list. Applying some style over unordered list items. Changing mouse cursor to pointer when its hover on list items and removing text-decoration from anchor <a> tag.

/* tab list item */
.tabs .tabs-list{
    list-style:none;
    margin:0px;
    padding:0px;
}
.tabs .tabs-list li{
    width:100px;
    float:left;
    margin:0px;
    margin-right:2px;
    padding:10px 5px;
    text-align: center;
    background-color:cornflowerblue;
    border-radius:3px;
}
.tabs .tabs-list li:hover{
    cursor:pointer;
}
.tabs .tabs-list li a{
    text-decoration: none;
    color:white;
}

Tab Content Section

Setting the minimum height of div with class="tab" to 250px we can change that according to need. Applying some padding: 20px 15px and set background-color to lavender. We didn’t want to show tab by default we only want to show it when its active so we set its display:none.

/* Tab content section */
.tabs .tab{
    display:none;
    width:96%;
    min-height:250px;
    height:auto;
    border-radius:3px;
    padding:20px 15px;
    background-color:lavender;
    color:darkslategray;
    clear:both;
}
.tabs .tab h3{
    border-bottom:3px solid cornflowerblue;
    letter-spacing:1px;
    font-weight:normal;
    padding:5px;
}
.tabs .tab p{
    line-height:20px;
    letter-spacing: 1px;
}

Active State

Changing display:block !important; for div content section, and change list item background-color:lavender !important; and color:black !important;

/* When active state */
.active{
    display:block !important;
}
.tabs .tabs-list li.active{
    background-color:lavender !important;
    color:black !important;
}
.active a{
    color:black !important;
}

Completed Code

.tabs{
    width:60%;
    height:auto;
    margin:0 auto;
}

/* tab list item */
.tabs .tabs-list{
    list-style:none;
    margin:0px;
    padding:0px;
}
.tabs .tabs-list li{
    width:100px;
    float:left;
    margin:0px;
    margin-right:2px;
    padding:10px 5px;
    text-align: center;
    background-color:cornflowerblue;
    border-radius:3px;
}
.tabs .tabs-list li:hover{
    cursor:pointer;
}
.tabs .tabs-list li a{
    text-decoration: none;
    color:white;
}

/* Tab content section */
.tabs .tab{
    display:none;
    width:96%;
    min-height:250px;
    height:auto;
    border-radius:3px;
    padding:20px 15px;
    background-color:lavender;
    color:darkslategray;
    clear:both;
}
.tabs .tab h3{
    border-bottom:3px solid cornflowerblue;
    letter-spacing:1px;
    font-weight:normal;
    padding:5px;
}
.tabs .tab p{
    line-height:20px;
    letter-spacing: 1px;
}

/* When active state */
.active{
    display:block !important;
}
.tabs .tabs-list li.active{
    background-color:lavender !important;
    color:black !important;
}
.active a{
    color:black !important;
}

/* media query */
@media screen and (max-width:360px){
    .tabs{
        margin:0;
        width:96%;
    }
    .tabs .tabs-list li{
        width:80px;
    }
}

3.jQuery

When unordered list item anchor <a> tag is get click we gone prevent it from its default action so we add e.preventDefault(); for it.

$(".tabs-list li a").click(function(e){
     e.preventDefault();
});

When a list item is getting clicked, then we first find <a> tag and getting its href value and storing it in variable tabid. In next step, we remove an active class from tab list and tab content section. Hiding class="tab" and show div which we get from anchor href, and adding the active class to clicked list item.

$(".tabs-list li").click(function(){
    var tabid = $(this).find("a").attr("href");
    $(".tabs-list li,.tabs div.tab").removeClass("active");   // removing active class from tab

    $(".tab").hide();   // hiding open tab
    $(tabid).show();    // show tab
    $(this).addClass("active"); //  adding active class to clicked tab

});

Completed Code

<script type="text/javascript">
    $(document).ready(function(){

        $(".tabs-list li a").click(function(e){
            e.preventDefault();
        });

        $(".tabs-list li").click(function(){
            var tabid = $(this).find("a").attr("href");
            $(".tabs-list li,.tabs div.tab").removeClass("active");   // removing active class from tab

            $(".tab").hide();   // hiding open tab
            $(tabid).show();    // show tab
            $(this).addClass("active"); //  adding active class to clicked tab

        });

    });
</script>
Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *