How To Use Custom Tabs In HTML With Simple JS

Using this code you can demonstrate tabs in your HTML website. You can customize it as you want.

So let’s go…

HTML:

<div class="example-tab-area">
    <ul class="tab-menu">
        <li>
            <a href="#" class="active" data-rel="tab-1">
                Tab One
            </a>
        </li>
        <li>
            <a href="#" data-rel="tab-2" class="">
                Tab Two
            </a>
        </li>
        <li>
            <a href="#" data-rel="tab-3" class="">
                Tab Three
            </a>
        </li>
    </ul>
    <div class="tab-box"  id="tab-1" style="display:block;">
        <h1>First Tab Content </h1>
        <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim.Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
    </div>
    <div class="tab-box" id="tab-2">
        <h1>Second Tab Content </h1>
        <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim.Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
    </div>
    <div class="tab-box" id="tab-3">
        <h1>Third Tab Content </h1>
        <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim.Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
    </div>
</div>

CSS:

.example-tab-area {
    max-width: 850px;
    margin: auto;
    border: 3px solid #f54337;
    padding: 100px;

}
.tab-menu {
    padding-left: 0;
    margin-bottom: 25px;
    text-align: center;
    li {
        display: inline-block;
        margin-right: 10px;
        &:last-child {
            margin-right: 0;
        }
        a {
            background-color: #878383;
            color: #ffffff;
            padding: 10px 20px;
            border-radius: 5px;
            &.active, &:hover, &:focus {
                background-color: #000000;
                color: #ffffff;
            }
        }
    }
}
.tab-box {
    display: none;
    text-align: center;
    h1 {
        font-size: 36px;
        font-weight: 600;
        color: #000000;
    }
    p {
        font-size: 18px;
        color: #121212;
    }
    &:first-child {
        display: block;
    }
}

JS:

$('.tab-menu li a').on('click', function(){
    var target = $(this).attr('data-rel');
$('.tab-menu li a').removeClass('active');
    $(this).addClass('active');
    $("#"+target).fadeIn('slow').siblings(".tab-box").hide();
    return false;
});