• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery实现tab选项卡效果代码示例

jQuery 程序员 2年前 (2019-01-15) 133次浏览 已收录 0个评论

本文实现了简单的tab选项卡效果。

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

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

一.代码注释:

(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,防止链接跳转。

 

本文案例为大家展示了《jQuery实现tab选项卡效果代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。

[code]<!DOCTYPE html> <html> <head> <meta charset=” utf-8″> <title>jQuery实现tab选项卡效果代码示例-搞代码gaodaiam.com</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”>搞代码001</a>     <a href=”#”>搞代码002</a>   </div>   <div class=”cnt”>     <ul>       <li>gaodaima.com</li>     </ul>   </div>   <div class=”cnt” style=”display:none;”>     <ul>       <li>搞代码带你飞</li>     </ul>   </div> </div> </body> </html>[/code]


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址