原生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>
上一篇: js中ajax请求的两种方式介绍
下一篇: 北京陶然亭公园