How to Create Tabs Using jQuery-In this article I will discuss how to create tabs using jquery along with html and css. needed to make this tab is a plugin of jquery that you candownload on their official website.




Create a new folder anywhere and name up to you but suggested the name "tabs". Furthermore copy jquery plugins into the new folder. Make the files that exist under this as index.html, style.css and script.js .

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
 
<html lang="en-gb" dir="ltr">
 <head>
  <meta <span id="IL_AD5" class="IL_AD">charset</span>="utf-8" />
  <title>Tabs</title>
  <link rel="stylesheet" href="style.css" />
 </head>
 <body>
  <div class="wrap">
    
   <h2>Basic</h2>
    
   <div class="set set-1">
    <div class="panel panel-1">
     <h2>Panel 1</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <<span id="IL_AD10" class="IL_AD">button</span> class="btn">Show tab 3</button>
     <button class="destroy">Destroy</button>
     <button class="apply">Apply</button>
    </div>
    
    <div class="panel panel-2">
     <h2>Panel 2</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    
    <div class="panel panel-3">
     <h2>Panel 3</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
    
    <div class="panel panel-4">
     <h2>Panel 4</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
   </div>
    
   <h2>Callback</h2>
    
   <div class="set set-2">
    <div class="panel panel-1">
     <<span id="IL_AD12" class="IL_AD">header</span> class="heading">Panel 1</header>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <button class="btn">Show tab 2</button>
    </div>
    
    <div class="panel panel-2">
     <header class="head">Panel 2</header>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    
    <div class="panel panel-3">
     <header class="h1">Panel 3</header>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
   </div>
  </div>
   
  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
  <script>
   $(function() {
    $(".set-1").mtabs();
     
    $(".set-2").mtabs({
     tab_text_el: ".heading, .head, header",
     onTabSelect: function(idx) {
      console.log("Selected tab is: " + idx);
     },
     onReady: function () {
      console.log('Set 2 ready!');
     }
    });
 
    $('.set-1 .panel-1 .btn').on('click', function(event) {
     $('.set-1').mtabs('show', 2);
 
     event.preventDefault();
    });
 
    $('.set-1 .panel-1 .destroy').on('click', function(event) {
     $('.set-1').mtabs('destroy');
 
     event.preventDefault();
    });
 
    $('.set-1 .panel-1 .apply').on('click', function(event) {
     $('.set-1').mtabs();
 
     event.preventDefault();
    });
 
    $('.set-2 .panel-1 .btn').on('click', function(event) {
     $('.set-2').mtabs('show', 1);
 
     event.preventDefault();
    });
   });
  </script>
 </body>
</html>


style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/*
 <span id="IL_AD8" class="IL_AD">Reset</span>
 --------------------------------------------------
*/
 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
 
blockquote, q {quotes: none;}
 
blockquote:before, blockquote:after,
q:before, q:after {
 content: "";
 content: none;
}
 
 
/*
 Typography
 --------------------------------------------------
*/
 
body {font: 0.750em/1.5em Arial, Verdana, Helvetica, sans-serif;}
 
h1, h2, h3, p {margin: 0 0 10px;}
 
p:last-child {margin: 0;}
 
h1 {font-size: 1.5em;}
 
h2 {font-size: 1.3em;}
 
/*
 <span id="IL_AD11" class="IL_AD">Structure</span>
 --------------------------------------------------
*/
 
.wrap {
 margin: 20px <span id="IL_AD3" class="IL_AD">auto</span>;
 width: 50%;
}
 
.set,
.panel {
 margin: 0 0 10px;
}
 
 
/*
 Tabs
 --------------------------------------------------
*/
 
.tabs .panel {padding: 10px;}
 
.tabs-menu {
 border-bottom: 1px solid #6E6E6E;
 padding: 0 10px;
}
 
.tabs-menu li {
 display: inline-block;
 *display: inline;
 zoom: 1;
 margin: 0 3px -1px 0;
 border: 1px solid #6e6e6e;
 border-radius: 3px 3px 0 0;
 padding: 6px 12px;
 background-color: #393939;
 cursor: pointer;
 position: relative;
 color:#fff;
}
 
.tabs-menu .active-tab {
 background-color: #fff;
 border-bottom: 0;
 padding-bottom: 7px;
 color:#393939;
}
button{
 background-color: #393939;
 cursor: pointer;
 color:#fff;
 padding: 5px 10px;
 border: 1px solid #6e6e6e;
 border-radius: 3px;
}
button:hover{
 background-color:#fff;
 color: #393939;
}


script.js

1
2