jQuery如何實現tab選項卡效果

admin發表於2017-02-10
jQuery
選項卡功能在眾多網站都在應用，不但美觀，而且也可以優化網站佈局，能夠以最少的空間為瀏覽器提供儘可能多的內容，而且便於切換，以前此種功能都是利用js程式碼寫的，下面就來介紹一下利用jQuery實現選項卡功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#tabbox {
  width: 600px;
  overflow: hidden;
  margin: 0 auto;
}
.tab_conbox {
  border: 1px solid #999;
  border-top: none;
}
.tab_con {
  display: none;
}
.tabs {
  height: 32px;
  border-bottom: 1px solid #999;
  border-left: 1px solid #999;
  width: 100%;
}
.tabs li {
  height: 31px;
  line-height: 31px;
  float: left;
  border: 1px solid #999;
  border-left: none;
  margin-bottom: -1px;
  background: #e0e0e0;
  overflow: hidden;
  position: relative;
}
 
.tabs li a {
  display: block;
  padding: 0 20px;
  border: 1px solid #fff;
  text-decoration: none;
  outline: none;
}
.tabs li a:hover {
  background: #ccc;
}
.tabs .thistab, .tabs .thistab a:hover {
  background: #fff;
  border-bottom: 1px solid #fff;
}
.tab_con {
  padding: 12px;
  font-size: 14px;
  line-height: 175%;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  jQuery.jqtab = function (tabtit, tab_conbox, shijian) {
    $(tab_conbox).find("li").hide();
    $(tabtit).find("li:first").addClass("thistab");
    $(tab_conbox).find("li:first").show();
    $(tabtit).find("li").bind(shijian, function () {
      $(this).addClass("thistab").siblings("li").removeClass("thistab");
      var activeindex = $(tabtit).find("li").index(this);
      $(tab_conbox).children().eq(activeindex).show().siblings().hide();
      return false;
    });
  };
  $.jqtab("#tabs", "#tab_conbox", "click");
});
</script>
</head>
<body>
  <div id="tabbox">
    <ul class="tabs" id="tabs">
      <li><a href="#">div+css</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">JSON</a></li>
      <li><a href="#">搜尋優化</a></li>
    </ul>
    <ul class="tab_conbox" id="tab_conbox">
      <li class="tab_con">
        <p>div+css</p>
      </li>
      <li class="tab_con">
        <p>jQuery</p>
      </li>
      <li class="tab_con">
        <p>JSON</p>
      </li>
      <li class="tab_con">
        <p>搜尋優化</p>
      </li>
    </ul>
  </div>
</body>
</html>

以上程式碼實現了選項卡切換功能，儘管看起來程式碼有些複雜，其實非常簡單，就是為選項卡繫結事件處理函式，以切換元素的隱藏和顯示，大家可以自行分析一下。

相關文章