html 选项卡实现原生

最新推荐文章于 2024-04-28 09:02:53 发布

suo172

最新推荐文章于 2024-04-28 09:02:53 发布

阅读量537

点赞数

本文链接：https://blog.csdn.net/suo172/article/details/104594459

版权

js部分

var tab = document.getElementById('tab');
var lis = tab.getElementsByTagName('li');
var mDiv = tab.getElementsByTagName('div');


function change(index) {
    for(var i= 0;i<lis.length;i++){
        lis[i].className = ''
        mDiv[i].className = ''
    }
    lis[index].className='select';
    mDiv[index].className='select';
}



for(var i=0;i<lis.length;i++){

    lis[i].zdy= i;
    lis[i].onmouseover= function () {
        change(this.zdy);
    }
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡练习</title>
    <link type="text/css" rel="stylesheet" href="css/tab.css">
</head>
<body>

<div id="tab">
    <ul>
        <li class="select">视频</li>
        <li>综艺</li>
        <li>秒拍</li>
    </ul>

    <div class="select">视频内容</div>
    <div>综艺内容</div>
    <div>秒拍内容</div>
</div>

<script type="text/javascript" src="js/tab.js"></script>

</body>
</html>

css

body,div,ul,li{
    padding: 0;
    margin: 0;
    font-size: 14px;
}

ul,li{
    list-style: none;
}

#tab {
    width: 500px;
    margin:10px auto 0;
}

#tab ul{
    position: relative;
    top: 1px;
    z-index: 100;
}

#tab ul li{
    /*margin: 10px auto 0;*/
    float: left;
    margin-right: 10px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #ddd;
    cursor: pointer;
}

#tab ul li.select{
    background: -webkit-linear-gradient(top left,#cc0000,#00b3ee,#ffff00);

}

#tab div{
    clear: both;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid #ddd;
    display: none;
}

#tab div.select{
    display: block;
}

suo172

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 选项卡实现原生

js部分var tab = document.getElementById('tab');var lis = tab.getElementsByTagName('li');var mDiv = tab.getElementsByTagName('div');function change(index) { for(var i= 0;i<lis.length;i++){ ...
复制链接

扫一扫