In this tutorial, we will look at how to create HTML, CSS and jQuery label. If you encounter problems, do not hesitate to ask me a question.
Tag is a good way of grouping a lot of content to a very small space. TARDIS …… feel like inside a larger label. When you have a lot of content, too much information at once will simply fill in your pages, they can be very convenient.
You might also like: accordion have created HTML, CSS and jQuery’s.
table of Contents

  1. Jump to HTML
  2. Skip to CSS
  3. Jump to jQuery
  • The HTML
    The complete code (HTML)
    Me more detail below HTML layout.






<div class="tabs">






<ul class="tab-links">






<li class="active"><a href="#tab1">Tab #1</a></li>












<li><a href="#tab2">Tab #2</a></li>












<li><a href="#tab3">Tab #3</a></li>












<li><a href="#tab4">Tab #4</a></li>






    </ul>












<div class="tab-content">






<div id="tab1" class="tab active">
Tab #1 content goes here!
Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.
        </div>












<div id="tab2" class="tab">
Tab #2 content goes here!
Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.
        </div>












<div id="tab3" class="tab">
Tab #3 content goes here!
Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.
        </div>












<div id="tab4" class="tab">
Tab #4 content goes here!
Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.
        </div>






    </div>






</div>







Tab links
Starting with a class = “label” div. There is a unordered list (or, if you prefer an orderly, it makes no difference in this tutorial), with a class = “link tags.” The internal list of items with an anchor link. The first list item is marked as class = “active.” This indicates where to start the label.
NOTE: When all finished CSS, link the parent tag with class = “active” in the page will load one of the highlight.







<div class="tabs">






<ul class="tab-links">






<li class="active"><a href="#tab1">Tab #1</a></li>












<li><a href="#tab2">Tab #2</a></li>












<li><a href="#tab3">Tab #3</a></li>












<li><a href="#tab4">Tab #4</a></li>






    </ul>






</div>






Label content
There is a class = “label content” div. Which we have four cells, each type = “label”, (this figure is equivalent to how many links there are tabs). Currently visible label also requires an active class, such as class = “tab activated.”







<div class="tab-content">






<div id="tab1" class="tab active">
Tab #1 content goes here!
Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa         interdum risus ornare mollis.
    </div>












<div id="tab2" class="tab">
Tab #2 content goes here!
Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.
    </div>












<div id="tab3" class="tab">
Tab #3 content goes here!
Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.
    </div>












<div id="tab4" class="tab">
Tab #4 content goes here!
Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.
    </div>






</div>






  • In CSS
    I want to keep it simple basic CSS (SCSS rather than a pre-processor similar to Texas, less than or stylus). Most of this tutorial is aimed at beginners, so I take this into account.

Completion code (CSS)
I go into detail details CSS styles below.

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}
 
    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }
 
    .tab-links li {
        margin:0px 5px;
        float:left;
        list-style:none;
    }
 
        .tab-links a {
            padding:9px 15px;
            display:inline-block;
            border-radius:3px 3px 0px 0px;
            background:#7FB5DA;
            font-size:16px;
            font-weight:600;
            color:#4c4c4c;
            transition:all linear 0.15s;
        }
 
        .tab-links a:hover {
            background:#a7cce5;
            text-decoration:none;
        }
 
    li.active a, li.active a:hover {
        background:#fff;
        color:#4c4c4c;
    }
 
    /*----- Content of Tabs -----*/
    .tab-content {
        padding:15px;
        border-radius:3px;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        background:#fff;
    }
 
        .tab {
            display:none;
        }
 
        .tab.active {
            display:block;
        }

Container Tags
Display: inline-block; and adds a type clearfix part, but also to make than to show that if we use a more “stable”: block;.
Here’s why we use clearfix over yet as follows: display: inline-block; and sometimes adds less than the hybrid elements affected margin 7px no way to remove it. Sometimes a negative bottom margin of the works, but it depends on your HTML is a lot of construction method. In this case, it’s fine.

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}

Link the label wrapper
We did not declare a list-style stop it appears as the default list. Then the margin so links are spaced evenly spaced (use margin: 0px 5px; with the use of margin: 0px 0px 5px 5 pixels).

.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
}

Tab links
These are basic styles, you should, if you try to understand this tutorial. If you do not, please find the appropriate value, and defined for each skill in CSS- yearbook.
You may be wondering why I use the transition: all linear 0.15 seconds; instead Transformation: Background Linear 0.15 seconds; the reason is very simple, in my experience, you have to consider in advance. If you do not hurry up, (and sometimes difficult to repair), an error pops up seemingly out of nowhere. By using backgrounds, but not all, we will limit what can be completed conversion: hover effect. Since this is a tutorial, many people may want to change the hover text color. Through the use of all, instead of the background, it makes this possible.

.tab-links a {
        padding:9px 15px;
        display:inline-block;
        border-radius:3px 3px 0px 0px;
        background:#7FB5DA;
        font-size:16px;
        font-weight:600;
        color:#4c4c4c;
        transition:all linear 0.15s;
    }
 
    .tab-links a:hover {
        background:#a7cce5;
        text-decoration:none;
    }
 
li.active a, li.active a:hover {
    background:#fff;
    color:#4c4c4c;
}

Label content
This is the background tab content section.

/*----- Content of Tabs -----*/
.tab-content {
    padding:15px;
    border-radius:3px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
    background:#fff;
}

Non-active / active label
We will all tabs display: none; to hide them. Then we’ll Activities tab to display: block; therefore only one will be displayed. Its use CSS it is designed in a way, this is a simple example of cascade down. Hence the name, Cascading Style Sheets.

.tab {
    display:none;
}
 
.tab.active {
    display:block;
}