tab选项卡切换实例代码

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS教程-蚂蚁部落</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 type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.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;">蚂蚁部落一</div>
  <div id="cate2" style="display:none;">蚂蚁部落二</div>
  <div id="cate3" style="display:none;">蚂蚁部落三</div>
  <div id="cate4" style="display:none;">蚂蚁部落四</div>
</div>
</body>
</html>

以上代码实现了简单的选项卡切换效果，实现的过程也比较简单，下面做一下简单的介绍。

一.实现原理:
原理很简单，在默认状态下，tab元素下的第一个li元素具有id属性属性，通过此属性设置了它的样式状态，同时选项卡内容部分，第一个li是出于现实状态的，其他处于隐藏状态。然后为tab元素下id属性值不为selectd的li元素注册click事件处理函数，当点击这些li元素的时候，能够将当前显示的内容部分隐藏，同时移除之前选中标题li的id属性，然后设置当前被点击li的id属性值，同时将相应的内容li显示。原理大体如此，感觉介绍的比较混乱，最好参阅代码注释，自己分析理解。
二.代码注释:
1.var tab=function(tabId,activeId){}，此函数用来进行切换处理，具有两个参数，第一个参数是标题li的容器元素id，第二个参数是当前被选中标题li的id属性值。
2.$("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){})，就本特效而言，是为tab元素下的id属性值不为selectedli元素注册click事件处理函数。
3.$("#"+$("#"+activeId).attr("tar")).css("display","none")，将上一个显示的内容li隐藏。
4.$("#"+activeId).removeAttr("id")，将上一个显示的标题li中的id属性值移除。
5.$(this).attr("id",activeId)，设置当前显示的标题li的id属性值。
6.$("#"+$(this).attr("tar")).css("display","block")，对应的内容li设置为显示状态。
三.相关阅读:
1.delegate可以参阅jQuery的delegate()方法一章节。
2.not选择器可以参阅jQuery的:not选择器一章节。
3.attr()函数可以参阅jQuery的attr()方法一章节。
4.removeAttr()函数可以参阅jQuery的removeAttr()方法一章节。
5.css()函数可以参阅jQuery的css()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9526

更多内容可以参阅:http://www.softwhy.com/jquery/

tab选项卡切换实例代码

猜你喜欢