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选项卡代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容