jQuery tab选项卡效果代码实例

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

本章节分享一段代码实例,它实现了简单的tab选项卡效果。

然后对代码的实现过程进行一下详细分析。

代码如下:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<title>犀牛前端部落</title> 
<style>
body{
  font:normal 12px/20px simsun; 
  margin:0 auto; 
  padding:0;
} 
*{
  margin:0px; 
  padding:0px;
}
h4{font-size:14px;}
h5{font-size:12px;}
img {border:none;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{
  text-decoration:underline;
  color:#ffae00;
}
#tab{
  width:240px; 
  margin:0 auto; 
  text-align:center;
}
.menu{
  height:35px; 
  line-height:32px; 
  padding-top:1px;
}
.menu a{
  display:inline-block; 
  height:35px; 
  line-height:35px; 
  width:116px; 
  text-align:center; 
  font-size:20px; 
  color:#999999; 
  font-weight:bold;
}
.menu a:hover, .menu a.on{
  color:#d33b55; 
  text-decoration:none;
}
.cnt{border:1px solid #999999; width:240px; height:100px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
  $(".menu a").each(function(i){
    $(this).click(function(){
      $(".menu a").removeClass("on").eq(i).addClass("on");
      $(".cnt").hide().eq(i).show();
      return false;
    })
  })
});
</script>
</head>
<body>
<div id="tab">
  <div class="menu">
    <a href="#" class="on">犀牛前端部落一</a>
    <a href="#">犀牛前端部落二</a>
  </div>
  <div class="cnt">
    <ul>
      <li>pipipi.net</li>
    </ul>
  </div>
  <div class="cnt" style="display:none;">
    <ul>
      <li>犀牛前端部落欢迎您</li>
    </ul>
  </div>
</div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

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

(2).$(".menu a").each(function(i){}),使用each()方法遍历链接a元素。

(3).$(".menu a").removeClass("on").eq(i).addClass("on"),将所有的链接a元素中的class样式类on删除,然后再将为前点击的a元素添加样式类a。

(4).$(".cnt").hide().eq(i).show(),将选项卡内容部分隐藏,然后将当前索引的内容元素显示。

(5).return false,防止链接跳转。

二.相关阅读:

(1).each()方法可以参阅jQuery each()一章节。

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

(3).eq()方法可以参阅jQuery eq()一章节。

(4).addClass()方法可以参阅jQuery addClass()一章节。

(5).return false可以参阅链接中return false的作用是什么一章节。

回复

我来回复
  • 暂无回复内容