jquery tab选项卡详解

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了简单的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;
}
#menubar ul {
  height: 29px;
  background-color: deepskyblue;
  list-style: none;
  border-top: solid 3px deepskyblue;
  padding-left: 1px;
  overflow: hidden;
}
#menubar ul li {
  float: left;
  margin: 0 2px;
  padding: 3px 24px;
  color: white;
  font-size: 15px;
  font-weight: bold;
  line-height: 20px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
#menubar ul li:hover {
  cursor: pointer;
  background-color: white;
  color: deepskyblue;
}
#menubar ul li.current {
  cursor: default;
  background-color: white;
  color: deepskyblue;
  height: 21px;
  font-size: 16px;
  padding-top: 5px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $("#content").text($("#menubar ul li.current").text()).css({
    "padding": "30px",
    "font-size": "120px"
  });
  $("#menubar ul li").click(function () {
    var current = $(this).siblings(".current");
    if($(this) == current.eq(0)){
      return;
    }
    $(this).addClass("current");
    current.removeClass("current");
    $("#content").text($(this).text());
  });
});
</script>
</head>
<body>
<div id="menubar">
  <ul>
    <li class="current">犀牛前端部落</li>
    <li>css教程</li>
    <li>div教程</li>
    <li>js教程</li>
  </ul>
</div>
<div id="content"></div>
</body>
</html>

上面的代码实现了选项卡效果,下面介绍一下它的实现过程。

一.代码注释:

(1).$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

(2).$("#content").text($("#menubar ul li.current").text()).css({

  "padding": "30px",

  "font-size": "120px"

}),默认情况下,将当前选项卡的文本内容写入id属性值为content的元素中,也就是写入选项卡内容元素。

并且设置它的内边距和字体大小。

(3).$("#menubar ul li").click(function () {}),为li元素注册click事件处理函数。

(4).var current = $(this).siblings(".current"),获取当前点击li元素兄弟元素中class属性值具有current的元素集合。

(4).if($(this) == current.eq(0)){

  return;

},如果点击的li元素是当前选项卡,那么直接跳出。

(5).$(this).addClass("current"),为当前元素class样式类中添加current。

(6).current.removeClass("current"),删除样式类中的current。

(7).$("#content").html($(this).text()),将当前选项卡的文本内容写入id属性值为content的元素。

二.相关阅读:

(1).siblings()可以参阅jQuery siblings()一章节。

(2).eq()可以参阅jQuery eq()一章节。

(3).addClass()可以参阅jQuery addClass()一章节。

(4).removeClass()可以参阅jQuery removeClass()一章节。

jquery tab选项卡详解,这样的场景在实际项目中还是用的比较多的,关于jquery tab选项卡详解就介绍到这了。

jquery tab选项卡详解属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容