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:

Chúc các bạn thành công!
Nguồn: ST
Bài liên quan

Home









hi hi hi
Trả lờiXóa