jquery實現的選項卡效果例項程式碼

admin發表於2017-02-20
jQuery

本章節分享一個比較優秀的選項卡程式碼例項，感興趣的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
.tab {
  width: 350px;
  margin: 100px auto;
}
.tabnav li {
  list-style: none;
  cursor: pointer;
  float: left;
  width: 80px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 5px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}
.tabnav li.cur {
  background: #daa520;
}
.tabcontent {
  display: none;
  padding: 20px;
}
.tabcon {
  border: 1px #708090 solid;
  background: #ffc0cb;
  height: 300px;
  clear: both;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
(function ($) {
  $.fn.extend({
    myTab: function (options) {
     var confings = {
       tabNav: '',//tab導航名稱
       tabTag: '',//tab導航標籤
       tabCon: '',//tab內容名稱
       conTag: '',//tab內容標籤和其他的類名
       method: 'click'//滑鼠事件狀態
     };//預設設定
     options = $.extend(confings, options);
     var that = $(this);
     var tagnav = $(confings.tabNav);
     var tabLi = tagnav.find(confings.tabTag);
     var tabcon = $(confings.tabCon);
     var tabUl = tabcon.find(confings.conTag);
     var timoutid = null;
     tabLi.each(function (ind) {
       $(this).bind(options.method, function () {
         var liNode = $(this);
         timoutid = setTimeout(function () { //滑鼠不小心劃過的延遲時間
           tabUl.hide();
           tabLi.removeClass("cur");
           tabUl.eq(ind).show();
           liNode.addClass("cur");
         }, 300);
       }).mouseout(function () {
         clearTimeout(timoutid);
       });
     })
     return this;
   }
 })
})(jQuery);
 
$(function () {
  $("#testtab5").myTab({
    tabNav: "#tabtag5",
    tabTag: "li",
    tabCon: "#tabcon5",
    conTag: ".tabcontent",
    method: "mouseover"
  });
  $("#testtab").myTab({
    tabNav: "#tabtag",
    tabTag: "li",
    tabCon: "#tabcon",
    conTag: ".tabcontent"
  });
})
</script>
</head>
<body>
  <div class="tab" id="testtab5">
    <div class="tabnav" id="tabtag5">
      <ul>
        <li class="cur">選單一</li>
        <li>選單二</li>
        <li>選單三</li>
      </ul>
    </div>
    <div class="tabcon" id="tabcon5">
      <div class="tabcontent" style="display: block;">內容一</div>
      <div class="tabcontent">內容二</div>
      <div class="tabcontent">內容三</div>
    </div>
 
    <div style="clear: both;margin-top: 60px;">
      <div class="tab" id="testtab">
        <div class="tabnav" id="tabtag">
          <ul>
            <li class="cur">選單一</li>
            <li>選單二</li>
            <li>選單三</li>
          </ul>
        </div>
        <div class="tabcon" id="tabcon">
          <div class="tabcontent" style="display: block;">內容一</div>
          <div class="tabcontent">內容二</div>
          <div class="tabcontent">內容三</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

相關文章