欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生js三种选项卡点击效果代码实现

程序员文章站 2022-10-25 14:22:15
第一种:选项卡单击点击切换 ...

第一种:选项卡单击点击切换

<!doctype html>
<html>
         <head>
                   <metacharset="utf-8" />
                   <title>选项卡-点击触发效果</title>
                   <styletype="text/css">
                            *{
                                     margin:0;
                                     padding:0;
                                     list-style:none;
                            }
                            body{
                                     background:#58596b;
                                     display:flex;
                                   justify-content:center;
                            }
                            #box{
                                     margin-top:10%;
                            }
                            .boxul{
                                     width:600px;
                                     height:60px;
                                     background:#33344a;
                            }
                            .boxul li{
                                     float:left;
                                     transition:0.3s;
                            }
                            .boxul li a{
                                     display:block;
                                     width:100px;
                                     height:60px;
                                     line-height:60px;
                                     /*border:1px solid red;*/
                                     text-decoration:none;
                                     text-align:center;
                                     color:#717181;
                                     font-size:15px;
                            }
                            .boxtwo{
                                     clear:left;
                            }
                            .boxtwoul{
                                     width:600px;
                                     height:300px;
                                     background:white;
                            }
                            .boxtwoul li{
                                     position:absolute;
                                     transition:0.3s;
                                     padding:30px;
                                     font-family:"微软雅黑";
                                     font-size:15px;
                                     width:600px;
                                     height:10px;
                            }
                            .show{
                                     opacity:3;
                            }
                            .hide{
                                     opacity:0;
                            }
                            .bj{
                                     background:#e74c3c;
                            }
                   </style>
                   <scripttype="text/javascript">
                            window.onload=function(){
                                     varoneli=document.getelementsbyclassname('box')[0].getelementsbytagname('li');
                                     vartwoli=document.getelementsbyclassname('boxtwo')[0].getelementsbytagname('li');
                                     vara=document.getelementsbyclassname('box')[0].getelementsbytagname('a')
                                    
                                      oneli[0].classname='bj'
                                     a[0].style.color='white'
                                     for(vari=0;i<oneli.length;i++){
                                               oneli[i].index=i
                                               oneli[i].onclick=function(){
                                                        varnum=parseint(this.index)
                                                        for(varj=0;j<oneli.length;j++){
                                                                 oneli[j].classname=''
                                                                  twoli[j].classname='hide'
                                                                 a[j].style.color=''
                                                        }
                                                                 oneli[num].classname='bj'
                                                                 twoli[num].classname='show'
                                                                 a[num].style.color='white'
                                               }
                                     }
                            }
                   </script>
         </head>
         <body>
                   <pid="box">
                            <divclass="box">
                                     <ul>
                                               <li><ahref="javascript:void(0)">新闻</a></li>
                                               <li><ahref="javascript:void(0)">综艺</a></li>
                                               <li><ahref="javascript:void(0)">娱乐</a></li>
                                               <li><ahref="javascript:void(0)">购物</a></li>
                                     </ul>
                            </p>
                            <pclass="boxtwo">
                                     <ul>
                                               <liclass="show">还在打王者lol呢?国家大事你关心了么?</li>
                                               <liclass="hide">元芳薛之谦事件你怎么看?</li>
                                               <liclass="hide">娱乐圈的那点事,潜规则?</li>
                                               <liclass="hide">淘宝双十一你们是不是又要剁手了?</li>
                                     </ul>
                            </p>
                   </p>
         </body>
</html>