Пишем код HTML:
Пишем стиль:
Пишем jquery:
Смотрим результат:
HTML:
<div class="container">
<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<span class='sidebar' id='sidebartab1' preferred='yes'>
<p>Isi konten widget tab 1
</br>
</br>
Bisa sobat isi dengan widget apa saja, misal widget popular post, label, arsip, dll.</br>
</br>
Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam.</br>
</br> Aliquam leo ante, posuere id suscipit et, varius quis metus.</br>
</br>
Aenean tincidunt pellentesque facilisis. Aliquam leo ante, posuere id suscipit et, varius quis metus.</p>
</span>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<span class='sidebar' id='sidebartab2' preferred='yes'>
<p>Isi konten widget tab 2
</br>
</br>
Bisa sobat isi dengan widget apa saja, misal widget popular post, label, arsip, dll.</br>
</br>
Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam.</br>
</br> Aliquam leo ante, posuere id suscipit et, varius quis metus.</br>
</br>
Aenean tincidunt pellentesque facilisis. Aliquam leo ante, posuere id suscipit et, varius quis metus.</p>
</span>
</div>
<div class='-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<span class='sidebar' id='sidebartab3' preferred='yes'>
<p>Isi konten widget tab 3
</br>
</br>
Bisa sobat isi dengan widget apa saja, misal widget popular post, label, arsip, dll.</br>
</br>
Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam.</br>
</br> Aliquam leo ante, posuere id suscipit et, varius quis metus.</br>
</br>
Aenean tincidunt pellentesque facilisis. Aliquam leo ante, posuere id suscipit et, varius quis metus.</p>
</span>
</div>
</div>
</div>
CSS:
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
*,
*:after,
*:before {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility
}
body {
background: #eaeaea none repeat scroll top left;
color: #444;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}
.container {
max-width: 310px;
margin: 12% auto;
padding: 0;
box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.1);
font-family: 'Open Sans', sans-serif;
}
/* Multi Tab Sidebar */
.multitab-section {
display: inline-block;
text-transform: uppercase;
width: 100%;
}
.multitab-section p {
display: inline-block;
background: #fff;
text-transform: lowercase;
font-size: 14px;
padding: 20px;
margin: 0;
}
.multitab-widget {
list-style: none;
margin: 0 0 10px;
padding: 0
}
.multitab-widget li {
list-style: none;
padding: 0;
margin: 0;
float: left
}
.multitab-widget li a {
background: #22a1c4;
color: #fff;
display: block;
padding: 15px;
font-size: 13px;
text-decoration: none
}
.multitab-tab {
width: 33.3%;
text-align: center
}
.multitab-section h2,
.multitab-section h3,
.multitab-section h4,
.multitab-section h5,
.multitab-section h6 {
display: none;
}
.multitab-widget li a.multitab-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #fff;
color: #444;
text-decoration: none;
border-top: 5px solid #22a1c4;
font-size: 14px;
text-transform: capitalize
}
JavaScript:
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });