tab选项卡切换源码实例

选项卡效果在网页中有大量的应用，当然在网上也有大量的实例，本章节就分享一个此类的选项卡效果，并且介绍一下它的实现过程，希望能够给需要的朋友或者想知道实现原理的朋友带来一定的帮助。

实例代码如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>CSS教程-51前端</title>
<style type="text/css">
li {
  border:1px solid #b5e2f3;
  border-bottom:0px;
  float:left;
  width:100px;
  height:25px;
  margin:0 7px;
  background:#F1FEF3;
  padding:9px 0 0 0;
  text-align:center;
  color:#33a3dc;
  cursor:pointer;
}
ul {
  width:800;
  height:36px;
  border-bottom:1px solid #b5e2f3;
  list-style:none;
}
#selected {
  background:#FFF!important;
  border-bottom:2px solid #FFF!important;
}
ul{margin:-1px;}
#cate1, #cate2, #cate3, #cate4, #cate5 {
  clear:both;
  height:300px;
  background:#FFFFFF;
  width:800px;
  height:100px;
  padding:25px;
border:1px solid #b5e2f3;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
var tab=function(tabId,activeId){ 
  $("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){ 
    $("#"+$("#"+activeId).attr("tar")).css("display","none"); 
    $("#"+activeId).removeAttr("id"); 
    $(this).attr("id",activeId); 
    $("#"+$(this).attr("tar")).css("display","block"); 
  }) 
}
$(document).ready(function(){
  tab("tab","selected"); 
})
</script>
</head>
<body>
<div id="tab">
  <ul>
    <li tar="cate1" id="selected">标题一</li>
    <li tar="cate2">标题二</li>
    <li tar="cate3">标题三</li>
    <li tar="cate4">标题四</li>
  </ul>
</div>
<div>
  <div id="cate1" style="display:block;">51前端一</div>
  <div id="cate2" style="display:none;">51前端二</div>
  <div id="cate3" style="display:none;">51前端三</div>
  <div id="cate4" style="display:none;">51前端四</div>
</div>
</body>
</html>

代码描述：tab选项卡切换。tab选项卡切换源码实例

下载全部收藏

101 135

用户评论

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

522688

作品：1334 | 粉丝：44

关注

TA的相关作品 >>更多

tab选项卡切换源码实例

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

jquery选项卡效果实例代码