基础JS选项卡

最新推荐文章于 2024-01-24 12:19:34 发布

wwwjiahuan

最新推荐文章于 2024-01-24 12:19:34 发布

阅读量314

点赞数

本文链接：https://blog.csdn.net/wwwjiahuan/article/details/53232035

版权

<!DOCTYPE HTML>
<html>
   <head>
       <meta charset="utf-8">
       <title>style</title>
       <style>
           #div1 input.active{
               background-color: yellow;
           }
           #div1 div{
               width: 200px;
               height: 200px;
               background-color: #ccc;
               display: none;
           }
       </style>
       <script>
       window.οnlοad=function()
       {
           var oDiv=document.getElementById('div1');//获取整体的id
           var aBtn=oDiv.getElementsByTagName('input');//获取按钮的Id数组
           var aDiv=oDiv.getElementsByTagName('div');//获取内容div数组

           for(var i=0;i<aBtn.length;i++)
           {
               aBtn[i].index=i;//用JS添加自定义属性值
               aBtn[i].οnclick=function()
               {
                   for(var i=0;i<aBtn.length;i++)
                   {
                       aBtn[i].className='';//先设置成空
                       aDiv[i].style.display='none';//内容都先设置为不显示
                   }

                   this.className='active';//当前点击的
                   aDiv[this.index].style.display='block';//但当前点击的div内容
               }

           }
       };

       </script>
   </head>
   <body>
       <div id="div1">

           <input class='active' type="button" value='1'>//设置开始显示的按钮
           <input type="button" value='1'>
           <input type="button" value='1'>
           <input type="button" value='1'>

           <div style="display:block;">11111</div>//设置开始显示的内容
           <div>22222</div>
           <div>33333</div>
           <div>44444</div>
       </div>

   </body>
</html>