Tạo tab nội dung với Jquery

• Trang chủ
• Sitemap
• Giới thiệu
• Liên hệ
• Dịch vụ
• Hỏi đáp
• Dynamic View

Noct Blog

• Blogger Tips
• Templates
• SEO
• Design
• Hosting
• Freebies
• Portfolio
  • Portfolio 2
• Javascript

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

25.3.11 / Được đăng bởi Noct

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.

Demo

Tìm trong template đoạn mã sau:
<div id='sidebar-wrapper'>
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:#fff;float:left;list-style-type:none;display:block;height:30px;line-height:30px;width:60px;border:4px solid #3c5670;text-align:center}
.tabs-widget li a{display:block;color:#3c5670;font-size:14px;text-decoration:none}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#ff8053;color:#fff}
#sidebartab1 h2, #sidebartab2 h2, #sidebartab3 h2{display:none}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function(){$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);$(this).addClass(&quot;tabs-widget-current&quot;);$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();var activeTab=$(this).attr(&quot;href&quot;);$(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:

Hy vọng thủ thuật đơn giản này có ích cho blog của bạn.

Về tác giả

Noct là một Blogger, anh ta có niềm đam mê đặc biệt với Blogspot và muốn chia sẻ những kinh nghiệm của mình với cộng đồng.

Enjoyed this Article?

Nếu bạn thích chủ đề này, bạn có thể đăng kí đọc tin RSS, theo dõi trên Twitter, hoặc chia sẻ trên mạng xã hội.

Tweet This Facebook Share Digg This Reddit Stumble Delicious

406Subscribers

53Followers

Đăng kí nhận tin

Chuyển đổi màu

Theo dõi blog

• Popular Posts
• Recent Posts
• Comments

Popular Posts

• Blogspot : một số vấn đề thường gặpTrong quá trình chỉnh sửa tùy biến Blogger hẳn không ít lần bạn mắc phải sai lầm khiến phát sinh lỗi ngoài ý muốn. Bạn không biết nên làm l...
• Tạo playlist nhạc cho BlogBài viết này sẽ hướng dẫn cách tạo một playlist nhạc bằng Flash để chèn vào blog, không phải từ mp3.zing.vn hay bất cứ website âm nhạc nào...
• Form đăng nhập cho BlogspotBài viết này sẽ hướng dẫn bạn làm một form đăng nhập ( Login Form ) trên blog với phong cách của Wordpress . Như vậy sẽ tiết kiệm thời gian...
• Tạo nút Back to Top với hiệu ứng từ jQueryHôm nay tình cờ ghé thăm Hư Trúc Blog thì thấy một cái Back to Top Button khá đẹp, sử dụng hiệu ứng trượt từ jQuery , và đặc biệt là nó ẩn...
• Khung comment đẹp cho Blogger Trước đây Noct từng đăng một bài hướng dẫn trang trí khung nhận xét của Blogspot , nhưng có vẻ như vẫn còn nhiều người chưa hiểu. Vì vậy...

Recent Posts

• Tạo Auto Readmore cho Blogger với Cutter.jsCách đây mấy tháng thì tôi có đọc bài giới thiệu về thư viện *Cutter.js* ở hỗn tạp blog, nhận thấy nó khá là thú vị. Thế là vào một ngày Chủ nhật rãnh rỗi ...
• Accordion SliderHôm nay mình sẽ giới thiệu một loại *jQuery Slider* mới nhưng lại không mới: *Demo * Hẳn bạn đã nhận ra đây chính là một nâng cấp của *Kwicks Slider* mà *N...
• Auto-Readmore EvolutionCái script này thì quá nổi tiếng rồi, ít nhất chúng ta đã dùng qua nó 1 lần. Hầu hết các blog thủ thuật đều ít nhiều đề cập tới *Auto-readmore*, vậy nên mặ...
• Newscast 1.1 DarkNewscast Template được *Noct* chia sẻ cách đây khá lâu và đã nhận được sự quan tâm của rất nhiều người, vì vậy nên lần này *Noct* tung ra bản update 1.1 sử...
• Khung comment đẹp (có phân cấp)Đây là khung comment cải tiến từ một bài đăng cũ, ở đây add thêm mục phân cấp. Do là *threaded comment* mặc định của *Blogger* nên chỉ được tối đa là 1 cấp...

Noct Blog

Đang tải...

Top

Blogger Buzz

Nhãn

• Blogger Tips
• Design
• Hỏi đáp
• Hosting
• jQuery
• Personal
• SEO
• Templates

Bạn bè

• Duy Pham Blog
• VnBlogspot
• DuyBlog
• Blog Thiết Kế
• Thủ thuật Blogger

Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License