选项卡点击切换
<!DOCTYPEhtml>
<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;
}
.boxulli{
float:left;
transition:0.3s;
}
.boxullia{
display:block;
width:100px;
height:60px;
line-height:60px;
/*border:1pxsolidred;*/
text-decoration:none;
text-align:center;
color:#717181;
font-size:15px;
}
.boxtwo{
clear:left;
}
.boxtwoul{
width:600px;
height:300px;
background:white;
}
.boxtwoulli{
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=iOneLi[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>
<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>
</div>
<divclass="boxtwo">
<ul>
<liclass="show">还在打王者LOL呢？国家大事你关心了么？</li>
<liclass="hide">元芳薛之谦事件你怎么看？</li>
<liclass="hide">娱乐圈的那点事，潜规则？</li>
<liclass="hide">淘宝双十一你们是不是又要剁手了？</li>
</ul>
</div>
</div>
</body>
</html>鼠标移入切换效果实现
<!DOCTYPEhtml>
<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;
}
.boxulli{
float:left;
transition:0.3s;
}
.boxullia{
display:block;
width:100px;
height:60px;
line-height:60px;
/*border:1pxsolidred;*/
text-decoration:none;
text-align:center;
color:#717181;
font-size:15px;
}
.boxtwo{
clear:left;
}
.boxtwoul{
width:600px;
height:300px;
background:white;
}
.boxtwoulli{
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].onmouseover=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>
<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>
</div>
<divclass="boxtwo">
<ul>
<liclass="show">还在打王者LOL呢？国家大事你关心了么？</li>
<liclass="hide">元芳薛之谦事件你怎么看？</li>
<liclass="hide">娱乐圈的那点事，潜规则？</li>
<liclass="hide">淘宝双十一你们是不是又要剁手了？</li>
</ul>
</div>
</div>
</body>
</html>定时轮播切换（定时设置是2s，可修改）
<!DOCTYPEhtml>
<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;
}
.boxulli{
float:left;
transition:0.3s;
}
.boxullia{
display:block;
width:100px;
height:60px;
line-height:60px;
/*border:1pxsolidred;*/
text-decoration:none;
text-align:center;
color:#717181;
font-size:15px;
}
.boxtwo{
clear:left;
}
.boxtwoul{
width:600px;
height:300px;
background:white;
}
.boxtwoulli{
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')
vartimer=null;
varnum=0;
console.log(OneLi.length)
OneLi[0].className='bj'
a[0].style.color='white'
showtimer()
functionshowtimer(){
timer=setInterval(function(){
num++;
if(num>=OneLi.length){
num=0
}
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'
},1000)
}
}
</script>
</head>
<body>
<divid="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>
</div>
<divclass="boxtwo">
<ul>
<liclass="show">还在打王者LOL呢？国家大事你关心了么？</li>
<liclass="hide">元芳薛之谦事件你怎么看？</li>
<liclass="hide">娱乐圈的那点事，潜规则？</li>
<liclass="hide">淘宝双十一你们是不是又要剁手了？</li>
</ul>
</div>
</div>
</body>
</html>
