js 实现tab切换功能

最新推荐文章于 2024-05-17 03:16:20 发布

黑猫大人-魏盛楠

最新推荐文章于 2024-05-17 03:16:20 发布

阅读量300

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_45499633/article/details/119028513

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <style>
       .tab_menu .selected{
           background-color: #aaa;
           }
       .tab_menu ul{
           height: 30px;
       }
       .tab_menu ul li{
           float: left;
           list-style: none;
           width: 50px;
           height: 30px;
           color: #000;
           border: 1px solid gray;
           border-bottom: none;
           text-align: center;
           line-height: 30px;
           margin-right: 3px;

       }
       .tab_box{
           width: 170px;
           height: 150px;
           border: 1px solid gray;
       }
       .tab_box .hide{
           display: none;
           }
   </style>
   <body>
       <div id="tab">
           <div class="tab_menu">
               <ul>
                   <li class="selected">首页</li>
                   <li>公告</li>
                   <li>我的</li>
               </ul>
           </div>
           <div class="tab_box">
               <div>首页111</div>
               <div class="hide">公告111</div>
               <div class="hide">我的111</div>
           </div>
       </div>
       <script>

       window.οnlοad=function(){
       var oTab=document.getElementById('tab');
       var aLi=oTab.getElementsByTagName('li');
       var oTabBox=oTab.getElementsByTagName('div')[1];
       var aBox=oTabBox.getElementsByTagName('div');
       for(var i=0;i<aLi.length;i++){
       aLi[i].index=i;
       aLi[i].οnclick=function(){
       for(var j=0;j<aLi.length;j++){
       aLi[j].className='';//取消菜单样式
       aBox[j].className='hide';//隐藏所有的tabDiv
       }
       aLi[this.index].className='selected';
       aBox[this.index].className='';
       }
       }
       }
       </script>
   </body>
</html>

黑猫大人-魏盛楠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js 实现tab切换功能

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style> .tab_menu .selected{ background-color: #aaa; } .tab_m...
复制链接

扫一扫