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

全部博文(108)

分类: 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;

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

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

  38.         #tit .titin{
  39.             border:2px solid #888;
  40.             background:#888;

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

  53.         <div id="content">
  54.             <div class="one">
  55.                 <ul>
  56.                     <li>aaaaaaaaaa</li>
  57.                     <li>aaaaaaaaaa</li>
  58.                     <li>aaaaaaaaaa</li>
  59.                     <li>aaaaaaaaaa</li>
  60.                     <li>aaaaaaaaaa</li>
  61.                     <li>aaaaaaaaaa</li>
  62.                 </ul>
  63.             </div>

  64.             <div>
  65.                 <ul>
  66.                     <li>bbbbbbbbbb</li>
  67.                     <li>bbbbbbbbbb</li>
  68.                     <li>bbbbbbbbbb</li>
  69.                     <li>bbbbbbbbbb</li>
  70.                     <li>bbbbbbbbbb</li>
  71.                     <li>bbbbbbbbbb</li>
  72.                 </ul>
  73.             </div>

  74.             <div>
  75.                 <ul>
  76.                     <li>cccccccccc</li>
  77.                     <li>cccccccccc</li>
  78.                     <li>cccccccccc</li>
  79.                     <li>cccccccccc</li>
  80.                     <li>cccccccccc</li>
  81.                     <li>cccccccccc</li>
  82.                 </ul>
  83.             </div>
  84.         </div>
  85.     </div>

  86.     <script type="text/javascript" charset="utf-8">
  87.         var h3os=document.getElementsByTagName("h3");
  88.     //    alert (h3os.length);
  89.         var cdivs=document.getElementById("content").getElementsByTagName("div");

  90. //    alert (cdivs.length);
  91.         function show(num){
  92.             for(var i=0; i<h3os.length; i++){
  93.                 if (i==num){
  94.                     h3os[num].className="titin";
  95.                     cdivs[num].style.display="block";
  96.                 }else{
  97.                     h3os[i].className="";
  98.                     cdivs[i].style.display="none";
  99.                 }
  100.             }
  101.         }
  102.     </script>
  103. </body>
  104. <

阅读(290) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~