Simple jQuery Tab system without jQuery UI

Using jQuery UI for only jQuery Tab system is bad idea because it will eat network bandwidth. If you are not going to use jQuery UI for creating tabs then you can make use of this.

Click Here to see DEMO

As shown in above picture, The Tab system contains 2 main parts
1. Tab display control buttons
2. Tab Containers

How it Works

If user clicks on Tab 1 then the code will hide container class elements and open up the container 1 ( 1st element of class container )

It will check index of Tab button and it will open same index container element.

Markup

<div id="tabsDiv">
        <ul id="tabs">
            <li>tab1</li>
            <li>tab2</li>
            <li>tab3</li>
        </ul>
        <hr />
        <div class="container">
            <br /> Container 1<br /> <br /> Content Here<br> <br />
        </div>
        <div class="container">
            <br /> Container 2<br /> <br /> Content Here<br> <br />
        </div>
        <div class="container">
            <br /> Container 3<br /> <br /> Content Here<br> <br />
        </div>
</div>

CSS

#tabsDiv #tabs li {
display:inline;
padding:10px;
background-color:#fafafa;
border:1px solid #ccc;
cursor:pointer;
color:#777;
}

#tabsDiv #tabs li.selected {
border-bottom:1px solid #fff;
background-color:#fff;
color:#222;
}

#tabsDiv {
position:relative;
height:auto;
border:1px solid #fff;
}

#tabsDiv #tabs {
top:0px;
left:0px;
position:absolute;
padding-left:0px;
}

#tabsDiv hr {
top:36px;
border:0px;
border-bottom:1px solid #ddd;
position:absolute;
width:100%;
z-index:0;
}

#tabsDiv #tabs {
top:0px;
position:absolute;
z-index:5;
}

#tabsDiv .container {
margin-top:46px;
padding:10px;
display:none;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}

jQuery

$(function() {
        $("#tabsDiv #tabs li").click(function() {
            $("#tabsDiv #tabs li").removeClass("selected");
            $(this).toggleClass("selected");
            var n = $("#tabsDiv #tabs li.selected").index();
            var obj = $("#tabsDiv .container:eq( " + n + " )");
            $("#tabsDiv .container").hide();
            $(obj).show();
        });
        $("#tabsDiv #tabs li:first").click();
    });

Click Here to see DEMO

3 comments:

for ict 9913 March 2018 at 07:11
great
Nannie Co Pam13 March 2018 at 22:44
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from JQuery Training in Chennai . or learn thru JQuery Training . or learn thru ES6 Online Training. Nowadays JavaScript has tons of job opportunities on various vertical industry.
Madoo30 July 2019 at 20:30
Nice blog information thanks for sharing .I am really impressed with your information

คาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
สมัครสล็อตออนไลน์ >>> Goldenslot
สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย

→	Convert XML or JSON to Java Pojo Classes
→	Change Icon Color Online

SodhanaLibrary