Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 957383
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
jQ tab选项卡效果

分类： jQuery

2016-09-09 21:33:34


代码如下：

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <link rel="stylesheet" href="css/1.css" />
  7.         <script type="text/javascript"src="js/jquery-1.9.1.js"></script>
  8.         <script type="text/javascript"src="js/1.js"></script>
  9.     </head>
  10.     <body>
  11.         <div id="kuang">
  12.             <button class="btn tab1">tab1</button>
  13.             <button class="btn tab2">tab2</button>
  14.             <button class="btn tab2">tab3</button>
  15.         </div>
  16.         <div id="appear">
  17.             <p id="content1">内容一</p>
  18.             <p id="content2">内容二</p>
  19.             <p id="content3">内容三</p>
  20.             
  21.         </div>
  22.     </body>
  23. </html>


点击(此处)折叠或打开

  1. window.onload = function(){
  2.     
  3.     
  4.     $(function(){
  5.         
  6.     $(function(){
  7.         
  8.         
  9.         $("#kuang").children().click(function(){
  10.             $(this).css("background","black").css("color","white").siblings().css("background","white").css("color","black");
  11.             $("p").eq($(this).index()).show().siblings().hide();
  12.         })
  13.         
  14.         
  15.         
  16.         
  17.     })
  18.         
  19.    
  20.         
  21.     })
  22.     
  23.     
  24.     
  25.   
  26. }


点击(此处)折叠或打开

  1. *{
  2.     margin:0;
  3.     padding:0;
  4. }
  5. .btn{
  6.     width:200px;
  7.     height: 40px;
  8.     margin-left:-10px;
  9.     font-size: 20px;
  10.     background: white;
  11. }
  12. .tab1{
  13.     background: black;
  14.     color: white;
  15. }
  16. #kuang{
  17.     margin-left:40px;
  18.     margin-top:40px;
  19. }
  20. #appear{
  21.     width: 594px;
  22.     height: 200px;
  23.     outline: 1px solid black;
  24.     margin-left:31px;
  25.     font-size: 30px;
  26. }
  27. p{
  28.     position: absolute;
  29.     display: none;
  30. }
  31. #content1{
  32.     display: block;
  33. }


阅读(927) | 评论(0) | 转发(0) |
1

上一篇：jQ 微博发布效果

下一篇：jQ 的AjAx请求

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6