当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 原生js三种选项卡点击效果代码实现

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

2019年05月17日  | 移动技术网IT编程  | 我要评论

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

<!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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网