Critical Developers

Programmers Knowledge Base

Simple Tab Using CSS and jQuery

Many times we come across to save/show the data in tab/wizard format and many of us as usual and habitually search a good plugin/library for tab, which requires unnecessary space at client and can also delayed the http request.

Below is the very simple and short tab plugin using css and jQuery.

Steps:-

1) Add jQuery reference (Use CDN path or yours local directory path)

<script src="js/jquery-1.10.1.min.js"></script>

2) Add the below js function

<script type="text/javascript">
        /* Simple Tab Script
        -----------------------------------------------*/
        function fnSimpTabChange(foElem, tabNo) {
            $(".simptab ul li").removeClass("curtab");  // remove current tab
            $(foElem).parent().addClass("curtab");      // assign current tab
            $(".tabpanel div.tab").removeClass("activetab");    // remove current tab panel
            $(".tabpanel div#tab" + tabNo).addClass("activetab");   // assign current tab panel
        }
    </script>

3) Add the following styles

/* Simple Tab Styles
 -------------------------------------------------*/
 body {
 margin:0;
 padding:0;
 font-family:arial,sans-serif;
 font-size:12px;
 }
 ul {
 margin:0;
 padding:0;
 }

 ul li {
 list-style:none;
 }

 a {
 color:#f00;
 text-decoration:none;
 outline:0 none;
 border:0 none;
 }

 a:hover {
 text-decoration:none;
 }

 a.visited {
 color:#f00;
 }

 .tabcontainer {
 width:600px;
 margin:0 auto;
 }

 .simptab
 {
 border-bottom: 1px solid #ff6a00;
 clear: both;
 margin-bottom: 14px;
 padding:0 10px;
 }

 .simptab ul
 { 
 height: 30px;
 margin: 0;
 padding: 0;
 position: relative;
 top: 5px;
 }

 .simptab ul li
 {
 border-left: 1px solid #ff6a00;
 border-right: 1px solid #ff6a00;
 border-top: 1px solid #ff6a00;
 cursor: pointer;
 float: left;
 margin: 0 8px;
 padding: 0px;
 background-color:#fbfaae;
 }

 .simptab ul li:hover
 {
 background-color:#FFFFFF !important;
 }

 .simptab ul li.curtab
 {
 background-color:#FFFFFF;
 }

 .simptab ul li a
 {
 display: block;
 padding: 5px 10px;
 }

 .simptab ul li a:hover
 {
 text-decoration:none;
 }

 .tabpanel .tab{
 display:none;
 min-height:300px;
 padding:0 10px;
 }

 .tabpanel .activetab {
 display:block;
 }

4) Add following HTML markups to display as tab

<div class="tabcontainer">
          <div class="simptab">
          <ul>
              <li class="curtab"><a href="javascript:void(0);" onclick="fnSimpTabChange(this,1);">Tab-1</a></li>
              <li><a href="javascript:void(0);" onclick="fnSimpTabChange(this,2);">Tab-2</a></li>
              <li><a href="javascript:void(0);" onclick="fnSimpTabChange(this,3);">Tab-3</a></li>
              <li><a href="javascript:void(0);" onclick="fnSimpTabChange(this,4);">Tab-4</a></li>
          </ul>
          </div>

          <div class="tabpanel">
              <!-- Tab-1 -->
              <div id="tab1" class="tab activetab">
                    Tab1
              </div>
              <!-- Tab-2 -->
              <div id="tab2" class="tab">
                     Tab2
              </div>
              <!-- Tab-3 -->
              <div id="tab3" class="tab">
                     Tab3
              </div>
              <!-- Tab-4 -->
              <div id="tab4" class="tab">
                     Tab4
              </div>
          </div>
    </div>

 

Thats it.

Comments (2) -

  • Shayariedil

    01-05-2014 21:34:50 | Reply

    Its a nice post bro, you saved my time. i was loking for jquery tabing, finally search end here thanks a lot. god bless you my dear friend

  • ziya

    02-05-2014 00:38:52 | Reply

    Its a nice post bro, you saved my time. i was looking for jquery tabing, finally search end here thanks a lot. god bless you my dear friend.
    www.shayariedil.com

Loading