js制作tab选项卡切换效果

最新推荐文章于 2022-03-22 22:54:23 发布

可我不吃肉

最新推荐文章于 2022-03-22 22:54:23 发布

阅读量219

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zfc180/article/details/105823044

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

/*css部分*/

		a{	
			text-decoration: none;
			color:#fff;
        }
        #wrap{
            display:flex;
            justify-content: space-between;
            width: 300px;
            height: 300px;
            background-color: rgb(84, 140, 172);
            margin:50px auto;
            padding: 0;
            list-style: none;
        }
        #wrap>li{
            position: relative;
            width: 200px;
            height: 30px;
            text-align: center;
            line-height: 30px; 
        }
        #wrap>li:hover{
            background-color: rgb(141, 55, 122);
        }
        #nav_holder{
            display: none;
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            height: 200px;
            background-color: rgb(187, 107, 156);
        }

/*html部分*/
	<ul id="wrap">
        <li>
            <a href="">首页1</a>
            <div id="nav_holder"></div>
        </li>
        <li>
            <a href="">首页2</a>
            <div id="nav_holder"></div>
        </li>
        <li>
            <a href="">首页3</a>
            <div id="nav_holder"></div>
        </li>
    </ul>

/*js部分*/
	 var wrap = document.querySelector('#wrap');
     var list = wrap.querySelectorAll('li');
     for(var i = 0;i<list.length;i++) {
         list[i].onmousemove = function() {
             this.children[1].style.display = "block";
         }
         list[i].onmouseleave = function() {
             this.children[1].style.display = 'none';
         }
     }