原生js三种选项卡效果（点击）

来源：互联网发布：梦幻2生死决数据编辑：程序博客网时间：2024/05/16 00:30

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

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

<divid="box">

<divclass="box">

<ul>

</ul>

</div>

<divclass="boxtwo">

<ul>

<liclass="show">还在打王者LOL呢？国家大事你关心了么？</li>

<liclass="hide">元芳薛之谦事件你怎么看？</li>

<liclass="hide">娱乐圈的那点事，潜规则？</li>

<liclass="hide">淘宝双十一你们是不是又要剁手了？</li>

</ul>

</div>

</body>

</html>

WEB前端学习交流群20 103791667

阅读全文

0 0