Home » Thủ Thuật » Thủ Thuật Blogger » Tạo Tab nội dung đơn giản với Jquery

Tạo Tab nội dung đơn giản với Jquery

Thứ Ba, 28 tháng 4, 2015

Tab menu giúp tiết kiệm không gian trên trang web, làm cho blog của bạn trông gọn gàng và chuyên nghiệp hơn. Có nhiều phương pháp để làm một tab nội dung ở sidebar, ở đây mình giới thiệu một cách đơn giản nhất, đó là sử dụng Jquery.
Tìm trong Template đoạn mã sau:
<div id='sidebar-wrapper'>
Nếu không tìm thấy kết quả trên, bạn tìm các dòng sau:
<div class='column-right-outer'>

<div class='column-right-inner'>

<aside>

Chèn ngay bên dưới nó

<style 
type='text/css'>ul.tabs-widget{padding:0}.tabs-widget li{margin:0 
10px 10px 
0;background:#444;float:left;list-style-type:none;display:block;height:30px;line-height:30px;width:80px;border:1px
 solid #222;text-align:center}.tabs-widget li 
a{display:block;color:#fff;font-size:12px;text-decoration:none}.tabs-widget
 li a:hover,.tabs-widget li 
a.tabs-widget-current{background:#0186ba;color:#fff}#sidebartab1 h2, 
#sidebartab2 h2, #sidebartab3 h2{display:none}</style>


<script src='http://k3nvil.googlecode.com/files/jquery.min1.4.3.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();$("ul.tabs-widget-widget-themater_tabs-1432447472-id
 li:first 
a").addClass("tabs-widget-current").show();$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();$("ul.tabs-widget-widget-themater_tabs-1432447472-id
 li 
a").click(function(){$("ul.tabs-widget-widget-themater_tabs-1432447472-id
 li a").removeClass("tabs-widget-current 
a");$(this).addClass("tabs-widget-current");$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();var
 activeTab=$(this).attr("href");$(activeTab).fadeIn();return 
false;});});
</script>



<h2>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Tab 1</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tab 2</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Tab 3</a></li>
</ul>
</h2>
<div class='clear'/>



<div
 class='tabs-widget-content 
tabs-widget-content-widget-themater_tabs-1432447472-id' 
id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes'/>
</div>
<div
 class='tabs-widget-content 
tabs-widget-content-widget-themater_tabs-1432447472-id' 
id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes'/>
</div>
<div
 class='tabs-widget-content 
tabs-widget-content-widget-themater_tabs-1432447472-id' 
id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes'/>
</div>

Các dòng màu xanh ở trên bạn có thể sửa lại cho phù hợp với blog của mình. Vậy là xong, tiếp theo bạn chỉ việc vào phần thiết kế rồi add tiện ích cho từng tab: