Chinaunix首页 | 论坛 | 博客

CrowTLFcrowtlf.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

crowtlf

  • 博客访问： 239996
  • 博文数量： 108
  • 博客积分： 3045
  • 博客等级： 中校
  • 技术积分： 1162
  • 用 户 组： 普通用户
  • 注册时间： 2007-04-19 18:26
文章分类

全部博文（108）

推荐博文
js_dom_2_2_标签切换的实现

分类： JavaScript

2014-03-17 14:16:35

/*标签切换*/

点击(此处)折叠或打开

  1. <html>
  2. <head>
  3.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  4.     <style>
  5.         #card {
  6.             width:300px;
  7.             height:200px;
  8.         }
  9.         #tit {
  10.             width:100%;
  11.             height:25px;
  12.             line-height:25px;
  13.         }
  14.         #tit h3{
  15.             margin:0px;
  16.             padding:0px;
  17.             width:80px;
  18.             background:#ccc;
  19.             float:left;
  20.             line-height:25px;
  21.             text-align:center;
  22.             border:2px solid white;
  23.             font-size:12px;
  24.             color:white;

  26.         }
  27.         #content {
  28.             width:100%;
  29.             height:175px;
  30.             background:#888;
  31.             color:white;

  33.         }
  34.         #content div{
  35.             display:none;
  36.         }
  37.         #content .one{
  38.             display:block;
  39.         }

  41.         #tit .titin{
  42.             border:2px solid #888;
  43.             background:#888;

  45.         }
  46.     </style>
  47.     <title>1</title>
  48.     
  49. </head>
  50. <body>
  51.     <div id="card">
  52.         <div id="tit">
  53.             <h3 onmouseover="show(0)" class="titin">第一项</h3>
  54.             <h3 onmouseover="show(1)" >第二项</h3>
  55.             <h3 onmouseover="show(2)" >第三项</h3>
  56.         </div>

  58.         <div id="content">
  59.             <div class="one">
  60.                 <ul>
  61.                     <li>aaaaaaaaaa</li>
  62.                     <li>aaaaaaaaaa</li>
  63.                     <li>aaaaaaaaaa</li>
  64.                     <li>aaaaaaaaaa</li>
  65.                     <li>aaaaaaaaaa</li>
  66.                     <li>aaaaaaaaaa</li>
  67.                 </ul>
  68.             </div>

  70.             <div>
  71.                 <ul>
  72.                     <li>bbbbbbbbbb</li>
  73.                     <li>bbbbbbbbbb</li>
  74.                     <li>bbbbbbbbbb</li>
  75.                     <li>bbbbbbbbbb</li>
  76.                     <li>bbbbbbbbbb</li>
  77.                     <li>bbbbbbbbbb</li>
  78.                 </ul>
  79.             </div>

  81.             <div>
  82.                 <ul>
  83.                     <li>cccccccccc</li>
  84.                     <li>cccccccccc</li>
  85.                     <li>cccccccccc</li>
  86.                     <li>cccccccccc</li>
  87.                     <li>cccccccccc</li>
  88.                     <li>cccccccccc</li>
  89.                 </ul>
  90.             </div>
  91.         </div>
  92.     </div>

  94.     <script type="text/javascript" charset="utf-8">
  95.         var h3os=document.getElementsByTagName("h3");
  96.     //    alert (h3os.length);
  97.         var cdivs=document.getElementById("content").getElementsByTagName("div");

  99. //    alert (cdivs.length);
  100.         function show(num){
  101.             for(var i=0; i<h3os.length; i++){
  102.                 if (i==num){
  103.                     h3os[num].className="titin";
  104.                     cdivs[num].style.display="block";
  105.                 }else{
  106.                     h3os[i].className="";
  107.                     cdivs[i].style.display="none";
  108.                 }
  109.             }
  110.         }
  111.     </script>
  112. </body>
  113. <

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

上一篇：js 对象的声明与操作

下一篇：js_dom_2_3 数组方式访问的七种方法

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

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

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

16024965号-6