Basic Tabs jQuery - Tạo tab nội dung nhỏ gọn cho website

Basic Tabs là một mẫu đơn giản để có được các tab trong website. Nó rất nhẹ và có thể thêm vào bất cứ đâu trong website. Basic Tabs JQuery plugin tuyệt vời này được phát triển bởi jsheffers.

Demo Download

Cài đặt cơ bản

Hãy chắc chắn website của bạn đã thêm thư việc jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Tiếp theo thêm code javascript sau vào trang của bạn.

(function( $ ) {
  $.fn.basicTabs = function(options){
    var settings = $.extend({
      active_class: "current",
      list_class: "tabs",
      content_class: "tab_content",
      starting_tab: 1
    }, options );
    var $content = $('.' + settings.content_class);
    var $list = $('.' + settings.list_class);
    $content.find('div').hide();
    $content.find("div:nth-child(" + settings.starting_tab + ")").show();
    $list.find("li:nth-child(" + settings.starting_tab + ")").addClass(settings.active_class);
    $("." + settings.list_class + ' li a').click(function(e){
        $list.find("li").removeClass(settings.active_class);
        $("." + settings.content_class + " > div").hide();
        $(this).parent().addClass(settings.active_class);
        var currentTab = $(this).attr('href');
        $(currentTab).show();
        e.preventDefault();
    });
  };
}( jQuery ));

Sau đó, sử dụng đoạn mã jQuery sau đây để bắt đầu.

$('#tabwrap').basicTabs();

Cấu trúc HTML

<div id="tabwrap">
  <ul class="tabs">
    <li class="current"><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <div class="tab_content">
    <div id="home" class="current">
      <p>Home</p>
    </div>
    <div id="about">
      <p>About</p>
    </div>
    <div id="services">
      <p>Services</p>
    </div>
    <div id="contact">
      <p>Contact</p>
    </div>
  </div>
</div>

Tùy chỉnh với CSS:

#tabwrap {
  background: #fff;
  overflow: hidden;
  width: 100%;
  min-height: 300px;
  margin: 60px auto;
  box-shadow: 0 0 20px #ddd;
  border: 1px solid #ddd;
}
.tabs {
  overflow: hidden;
  background: #777;
}
.tabs li { list-style: none; }
.tabs li a {
  float: left;
  display: block;
  padding: 10px;
  color: #fff;
  width: 20%;
  text-decoration: none;
  text-align: center;
  border-right: 1px solid #555;
  border-left: 1px solid #888;
  font-size: 15px;
  text-shadow: 1px 1px 0 #000;
}
.tabs li a:hover { background: #666; }
.tabs li:first-child a { border-left: 0; }
.tabs li:last-child a { border-right: 0; }
.tabs li.current a {
  background: #fff;
  color: #666;
  text-shadow: 1px 1px 0 #fff;
}
.tab_content > div {
  clear: both;
  padding: 20px;
  line-height: 19px;
  color: #666;
  text-shadow: 1px 1px 0 #fff;
  display: none;
}
.tab_content .current { display: block; }
.tab_content #home.first { display: block; }
.tab_content p { margin: 0 0 20px 0; }

Chúc bạn thành công !