君语贤
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

前端设计>切换特效>正文

JS选项卡切换

2019-01-24 12:02 君语贤JS切换选项卡

选项卡点击切换

JS选项卡切换


<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8" />
        <title>选项卡-点击触发效果</title>
        <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            background: #58596B;
            display: flex;
            justify-content: center;
        }
        #box {
            margin-top: 10%;
        }
        .box ul {
            width:600px;
            height: 60px;
            background: #33344A;
        }
        .box ul li {
            float: left;
            transition: 0.3s;
        }
        .box ul 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;
        }
        .boxtwo ul {
            width: 600px;
            height: 300px;
            background: white;
        }
        .boxtwo ul 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>
        <script type="text/javascript">
        window.onload = function () {
            var OneLi = document.getElementsByClassName('box')[0].getElementsByTagName('li');
            var TwoLi = document.getElementsByClassName('boxtwo')[0].getElementsByTagName('li');
            var a = document.getElementsByClassName('box')[0].getElementsByTagName('a') OneLi[0].className = 'bj'
            a[0].style.color = 'white'
            for (var i = 0; i < OneLi.length; i++) {
                OneLi[i].index = iOneLi[i].onclick = function () {
                    var num = parseInt(this.index) for (var j = 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>
        <div id="box">
            <div class="box">
                <ul>
                    <li><a href="javascript:void(0)">新闻</a>
                    </li>
                    <li><a href="javascript:void(0)">综艺</a>
                    </li>
                    <li><a href="javascript:void(0)">娱乐</a>
                    </li>
                    <li><a href="javascript:void(0)">购物</a>
                    </li>
                </ul>
            </div>
            <div class="boxtwo">
                <ul>
                    <li class="show">还在打王者LOL呢？国家大事你关心了么？</li>
                    <li class="hide">元芳薛之谦事件你怎么看？</li>
                    <li class="hide">娱乐圈的那点事，潜规则？</li>
                    <li class="hide">淘宝双十一你们是不是又要剁手了？</li>
                </ul>
            </div>
        </div>
    </body>

</html>

鼠标移入切换效果实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选项卡-鼠标移入触发效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background: #58596B;
display: flex;
justify-content: center;
}
#box{
margin-top: 10%;
}
.box ul{
width:600px;
height: 60px;
background: #33344A;
}
.box ul li{
float: left;
transition: 0.3s;
}
.box ul 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;
}
.boxtwo ul{
width: 600px;
height: 300px;
background: white;
}
.boxtwo ul 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>
<script type="text/javascript">
window.onload=function(){
var OneLi=document.getElementsByClassName('box')[0].getElementsByTagName('li');
var TwoLi=document.getElementsByClassName('boxtwo')[0].getElementsByTagName('li');
var a=document.getElementsByClassName('box')[0].getElementsByTagName('a')
OneLi[0].className='bj'
a[0].style.color='white'
for(var i=0;i<OneLi.length;i++){
OneLi[i].index=i
OneLi[i].onmouseover=function(){
var num=parseInt(this.index)
for(var j=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>
<div id="box">
<div class="box">
<ul>
<li><a href="javascript:void(0)">新闻</a></li>
<li><a href="javascript:void(0)">综艺</a></li>
<li><a href="javascript:void(0)">娱乐</a></li>
<li><a href="javascript:void(0)">购物</a></li>
</ul>
</div>
<div class="boxtwo">
<ul>
<li class="show">还在打王者LOL呢？国家大事你关心了么？</li>
<li class="hide">元芳薛之谦事件你怎么看？</li>
<li class="hide">娱乐圈的那点事，潜规则？</li>
<li class="hide">淘宝双十一你们是不是又要剁手了？</li>
</ul>
</div>
</div>
</body>
</html>

定时轮播切换（定时设置是2s，可修改）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选项卡-自动播放效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background: #58596B;
display: flex;
justify-content: center;
}
#box{
margin-top: 10%;
}
.box ul{
width:600px;
height: 60px;
background: #33344A;
}
.box ul li{
float: left;
transition: 0.3s;
}
.box ul 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;
}
.boxtwo ul{
width: 600px;
height: 300px;
background: white;
}
.boxtwo ul 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>
<script type="text/javascript">
window.onload=function(){
var OneLi=document.getElementsByClassName('box')[0].getElementsByTagName('li');
var TwoLi=document.getElementsByClassName('boxtwo')[0].getElementsByTagName('li');
var a=document.getElementsByClassName('box')[0].getElementsByTagName('a')
var timer=null;
var num=0;
console.log(OneLi.length)
OneLi[0].className='bj'
a[0].style.color='white'
showtimer()
function showtimer(){
timer=setInterval(function(){
num++;
if(num>=OneLi.length){
num=0
}
for(var j=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>
<div id="box">
<div class="box">
<ul>
<li><a href="javascript:void(0)">新闻</a></li>
<li><a href="javascript:void(0)">综艺</a></li>
<li><a href="javascript:void(0)">娱乐</a></li>
<li><a href="javascript:void(0)">购物</a></li>
</ul>
</div>
<div class="boxtwo">
<ul>
<li class="show">还在打王者LOL呢？国家大事你关心了么？</li>
<li class="hide">元芳薛之谦事件你怎么看？</li>
<li class="hide">娱乐圈的那点事，潜规则？</li>
<li class="hide">淘宝双十一你们是不是又要剁手了？</li>
</ul>
</div>
</div>
</body>
</html>


本文链接：https://www.weguiding.com/qiehuan/196.html

猜你喜欢

图文推荐
热门标签
切换选项卡JS列表切换切换特效Tab二级菜单鼠标划过SwiperSuperslide特效网页制作

君语贤这是君语贤的个人博客，用于记载日常遇到的问题以及解决方法，作为个人经验累积。

法律声明：部分内容整合于互联网，如存在版权或非法内容，侵联删。

Copyright © 2008-2017 君语贤. All rights reserved. Powered by 君语贤 ICP备案号:湘ICP备15003375号 网站地图|