jQuery实现的tab选项卡代码实例
分类：实例代码
本章节分享一段代码实例，它利用jQuery实现的tab选项卡功能。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
font-family: "Microsoft YaHei";
}
ul, li {
list-style: none;
}
#tab {
position: relative;
margin-left: 460px;
margin-top: 20px;
}
#tab .tabList ul li {
float: left;
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe, #ededed);
background: -o-linear-gradient(top, #fefefe, #ededed);
background: -webkit-linear-gradient(top, #fefefe, #ededed);
border: 1px solid #ccc;
padding: 5px 0;
width: 100px;
text-align: center;
margin-left: -1px;
position: relative;
cursor: pointer;
}
#tab .tabList li a {
color: #333;
text-decoration: none;
}
#tab .tabCon {
position: absolute;
left: -1px;
top: 32px;
border: 1px solid #ccc;
border-top: none;
width: 403px;
height: 100px;
}
#tab .tabCon div {
padding: 10px;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
#tab .tabList li.cur {
border-bottom: none;
background: #fff;
}
#tab .tabCon div.cur1 {
opacity: 1;
filter: alpha(opacity=100);
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
$(".tabList li").mouseover(function () {
var index = $(this).index();
$(this).addClass("cur");
$(this).siblings().removeClass("cur");
$(".tabCon div").eq(index).addClass("cur1");
$(".tabCon div").eq(index).siblings().removeClass("cur1");
})
})
</script>
</head>
<body>
<div id="tab">
<div class="tabList">
<ul>
<li class="cur"><a href="#">前端教程网一</a></li>
<li><a href="#">前端教程网二</a></li>
<li><a href="#">前端教程网三</a></li>
<li><a href="#">前端教程网四</a></li>
</ul>
</div>
<div class="tabCon">
<div class="cur1">本站的url地址是pipipi.net</div>
<div>只有努力奋斗才会有美好的未来</div>
<div>每一天都是新的，好好珍惜</div>
<div>没有人一开始就是高手，必须努力</div>
</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
#tab .tabList ul li {
float: left;
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe, #ededed);
background: -o-linear-gradient(top, #fefefe, #ededed);
background: -webkit-linear-gradient(top, #fefefe, #ededed);
border: 1px solid #ccc;
padding: 5px 0;
width: 100px;
text-align: center;
margin-left: -1px;
position: relative;
cursor: pointer;
}
上面的css代码是用来设定标题li元素的样式的。
#tab .tabCon {
position: absolute;
left: -1px;
top: 32px;
border: 1px solid #ccc;
border-top: none;
width: 403px;
height: 100px;
}
上面的代码用来设置选项卡内容元素的容器。
#tab .tabCon div {
padding: 10px;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
设置内容选项卡为绝对定位，并且都是全透明。
#tab .tabList li.cur {
border-bottom: none;
background: #fff;
}
上面的代码设置鼠标悬浮于标题选项卡时候的样式。
#tab .tabCon div.cur1 {
opacity: 1;
filter: alpha(opacity=100);
}
设置当前显示内容选项卡的样式，内容选项卡之所以显示，是因为将其设置为不透明。
$(function () {})
当文档结构完全加载完毕再去执行函数中的代码。
$(".tabList li").mouseover(function () {})
为标题li元素注册mouseover事件处理函数。
var index = $(this).index()
获取当前li元素的索引值。
$(this).addClass("cur");
$(this).siblings().removeClass("cur");
为当前鼠标悬浮的li元素添加名为cur的class样式类。
并且移出其他标题选项卡li元素的名为cur的class样式类。
$(".tabCon div").eq(index).addClass("cur1");
$(".tabCon div").eq(index).siblings().removeClass("cur1");
和上面是一样的道理。
二.相关阅读:
（1）.mouseover事件可以参阅jQuery mouseover事件一章节。
（2）.index()可以参阅jQuery index()一章节。
（3）.addClass()可以参阅jQuery addClass()一章节。
（4）.siblings()可以参阅jQuery siblings()一章节。
（5）.removeClass()可以参阅jQuery removeClass()一章节。
（6）.eq()可以参阅jQuery eq()一章节。
jQuery实现的tab选项卡代码实例，这样的场景在实际项目中还是用的比较多的，关于jQuery实现的tab选项卡代码实例就介绍到这了。
jQuery实现的tab选项卡代码实例属于前端实例代码，有关更多实例代码大家可以查看。