Skip to content

JavaScript Tabs Style 2


JavaScript Tabs Style



    <div class="container">
        <h2>Tabs Styled</h2>
        <div class="tabs">
            <div class="tab tab1 " onclick="clickFunction(event,'js')">JavaScript</div>
            <div class="tab tab2 " onclick="clickFunction(event,'py')">Python</div>
            <div class="tab tab3 " onclick="clickFunction(event,'css')">CSS</div>

        <div class="text_box">
            <div class="text tab_box1" id="js">
                JavaScript is one of the most popular and dynamic programming
                languages used for creating and developing websites.
            <div class="text tab_box2" id="py">
                Python is a highly used and all-purpose programming
                language which is dynamic in nature.
            <div class="text tab_box3" id="css">
                Some of the elements which CSS has an impact on include
                font size, font style, the overall layout.


@import url('');
body {
    background: #262626;
    display: flex;
    justify-content: center;
    margin-top: 150px;
    font-family: 'Roboto Condensed', sans-serif;
    width: 330px;
    height: auto;
    border-radius: 8px 8px 0px 0px;
h2 {
    text-align: center;
    margin-bottom: 50px;
    color: #ccc;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: normal;
    text-shadow: 0px 20px 36px rgba(0, 0, 0, 0.45);
    font-size: 32px;
.tabs {
    position: relative;
    width: 100%;
    height: 40px;
    color: #ccc;
    border-radius: 8px 8px 0px 0px;
.tab {
    width: 110px;
    float: left;
    text-align: center;
    line-height: 40px;
    font-family: arial;
    cursor: pointer;
    transition: .3s;
.text_box {
    position: relative;
    display: block;
    width: 100%;
.text {
    position: absolute;
    padding: 25px;
    width: 100%;
    height: 120px;
    background: #d5d5d5;
    box-sizing: border-box;
    border-radius: 0px 0px 8px 8px;
    box-shadow: 0px 20px 36px rgba(0, 0, 0, 0.45);
.tab1,.tab2,.tab3 {
    background: #bc2626;
.tab1{border-radius:8px 0px 0px 0px}
.tab3{border-radius:0px 8px 0px 0px}
    transform: scaleY(1.1) translateY(-2px);
    box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.15);
    transform: scaleY(1.3) translateY(-3px);
    background: #d5d5d5;
    color: #262626;
    box-shadow: 10px 0px 10px #262626;


   function clickFunction(eve, section) {
            let i, text, tabs;
            text = document.getElementsByClassName("text");
            tabs = document.getElementsByClassName("tab");
            for (i = 0; i < text.length; i++) {
                text[i].style.display = "none";
            for (i = 0; i < tabs.length; i++) {
                tabs[i].className = tabs[i].className.replace("active","");
            document.getElementById(section).style.display = "block";
            eve.currentTarget.className += "active";

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: