javascript的DOM学习之选项卡制作

最新推荐文章于 2024-08-30 20:29:15 发布

weixin_30376323

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量78

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/leeten/p/3432814.html

版权

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <style>
       h3{
        width: 100px;
        height: 25px;
        line-height: 25px;
        float: left;
        background: #333;
        color: #fff;
        margin: 0px;
        padding: 0px;
        border: 5px solid #fff;
       }
       .selecth3{
        background: #fff;
        color: #000;
    }
       
       #select:after{
          content: "";
          display: block;
          width: 0px;
          height: 0px;
          clear: both;
       }
       #content{
        padding-top: 20px;
        width: 400px;
        height: 300px;
        background: #333;
        color: #fff;
       }
       #content div{
        display: none;
       }
       #content div:first-child{
        display: block;

       }

    </style>

    <body>
         <div id="select">
             <h3 οnmοuseοver="show(0)" class="selecth3">选项一</h3>
              <h3 οnmοuseοver="show(1)">选项二</h3>
               <h3 οnmοuseοver="show(2)">选项三</h3>
         </div>
   <div id="content">
         <div>
            选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一
         </div>
          <div>
            选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二选项二
         </div>
           <div>
            选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三选项三
         </div>
   </div>
   <script>
         var ah3=document.getElementsByTagName('h3');

         var contentget=document.getElementById('content').getElementsByTagName('div');
      
         function show(num){

            for(var i=0;i<ah3.length;i++)
            {
                  if(i==num){
                       ah3[num].className="selecth3";
                       contentget[num].style.display="block";
                  }
                  else{
                    ah3[i].className=" ";
                    contentget[i].style.display="none";
                  }
            }

           
}


         
   </script>

    </body>
</html>

演示：demo

主要是操作dom数组来操作相应的dom

转载于:https://www.cnblogs.com/leeten/p/3432814.html

weixin_30376323

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript的DOM学习之选项卡制作

<!doctype html><html> <head> <meta charset="utf-8"/> </head> <style> h3{ width: 100px; height: 25px; ...
复制链接

扫一扫