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

选项卡功能在众多网站都在应用，不但美观，而且也可以优化网站布局，能够以最少的空间为浏览器提供尽可能多的内容，而且便于切换，以前此种功能都是利用js代码写的，下面就来介绍一下利用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">
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="https://www.51qianduan.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>

代码描述：jQuery实现tab选项卡。jQuery实现tab选项卡效果代码实例

下载全部收藏

196 261

用户评论

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