jquery选项卡效果实例代码

本章节分享一个比较优秀的选项卡代码实例，感兴趣的朋友可以做一下参考。

代码实例如下:

[ jQuery ] 运行代码下载代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</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>

代码描述：jquery选项卡。jquery选项卡效果实例代码

下载全部收藏

113 150

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册

522688

作品：1334 | 粉丝：44

关注

TA的相关作品 >>更多

jquery选项卡效果实例代码

tab选项卡切换源码实例

jQuery实现tab选项卡效果代码实例