Chinaunix首页 | 论坛 | 博客

Json`x-Chinaunixliujianxun.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

ljx2380000

  • 博客访问： 159540
  • 博文数量： 19
  • 博客积分： 470
  • 博客等级： 下士
  • 技术积分： 252
  • 用 户 组： 普通用户
  • 注册时间： 2012-03-06 09:16
文章分类

全部博文（19）

文章存档

2013年（2）

2012年（17）

我的朋友
最近访客
推荐博文
相关博文
一个通用的JS选项卡代码兼容所有浏览器

分类： Python/Ruby

2012-03-13 18:56:58

点击(此处)折叠或打开

  1. <html>
  2.     <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>js选项卡</title>
  5.     <script language="javascript" type="text/javascript">
  6.         function NewsChang(obj,thisNum,totalNum){
  7.             /*
  8.             obj 元素ID号前缀
  9.             thisNum 当前元素的ID标识
  10.             totalNum 总的选项卡数
  11.             */
  12.             for(i=1;i<=totalNum;i++){
  13.                 if(i==thisNum){
  14.                     document.getElementById(obj+'_h_'+i).className="select";
  15.                     document.getElementById(obj+'_c_'+i).className="select";
  16.                 }else{
  17.                     document.getElementById(obj+'_h_'+i).className='unselect';
  18.                     document.getElementById(obj+'_c_'+i).className="unselect";
  19.                 }
  20.             }
  21.         }
  22.     </script>
  23.      
  24.     <style type="text/css">
  25.         .first_s_h a.select{background:#aaa;}
  26.         .first_s_h a.unselect{background:#fff;}
  27.         dl.select{display:block;}
  28.         dl.unselect{display:none;}
  29.     </style>
  30.     </head>
  31.     <div id="first_s" class="webcon">
  32.     <div class="first_s_l">
  33.             <div class="first_s_h">
  34.                 <a href="#" class="select" id="s1_h_1" onmouseover="NewsChang('s1',1,2)">公示公告</a>
  35.                 <a href="#" class="unselect" id="s1_h_2" onmouseover="NewsChang('s1',2,2)">茶陵县情</a>
  36.             </div>
  37.             <dl class="select" id="s1_c_1">
  38.                 <dt>
  39.                     <tt>县志</tt>
  40.                     <tt>党史</tt>
  41.                     <tt style="border-right:none">年鉴</tt>
  42.                     <div class="clear"></div>
  43.                 </dt>
  44.                 <dd><a href="#">打开扶贫贷款打开管理费东风历</a></dd>
  45.                 <dd><a href="#">打开扶贫贷款打开管理费东风历</a></dd>
  46.             </dl>
  47.             <dl class="unselect" id="s1_c_2">
  48.                 <dt>
  49.                     <tt>1</tt>
  50.                     <tt>2</tt>
  51.                     <tt style="border-right:none">3</tt>
  52.                     <div class="clear"></div>
  53.                 </dt>
  54.                 <dd><a href="#">123</a></dd>
  55.                 <dd><a href="#">123</a></dd>
  56.                 <dd><a href="#">打开扶贫贷款打开管理费东风历</a></dd>
  57.                 <dd><a href="#">打开扶贫贷款打开管理费东风历</a></dd>
  58.                 <dd><a href="#">打开扶贫贷款打开管理费东风历打开扶贫贷款打开管理费东风历</a></dd>
  59.             </dl>
  60.         </div>
  61.     <body>
  62.     </body>
  63.     </html>

阅读(1771) | 评论(0) | 转发(0) |
0

上一篇：jQuery响应ctrl+Enter事件

下一篇：JS代码缩进/编码检测/进度条

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

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

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

16024965号-6