通过js实现导航栏切换

最新推荐文章于 2024-07-29 11:53:27 发布

qq_51426429

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量589

点赞数

文章标签： javascript webview elementui

本文链接：https://blog.csdn.net/qq_51426429/article/details/124657113

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="all">
        <div class="head">
            <ul class="ul">
                <li class="list"><a href="#" class="xinlang-a">图片一</a></li>
                <li class="list"><a href="#" class="xinlang-a">图片二</a></li>
                <li class="list"><a href="#" class="xinlang-a">图片三</a></li>
            </ul>
        </div>
        <div class="box">
            <img src="image/SWUST1.jpg" >    
        </div>
        <div class="box">
            <img src="image/SWUST2.jpg" >    
        </div>
        <div class="box">
            <img src="image/SWUST3.jpg" >    
        </div>
</div>
    <style>
        .all{
            position: relative;
        }
        .head{
            position: relative;
        }
        .head li{
            float: left;
            list-style: none;
            padding: 10px;
            
        }
        .box{
            position: absolute;
            float: left;
            top: 30px;
        }
    </style>   
    <script>
        var liitem = document.getElementsByClassName("list")
        var boxitem = document.getElementsByClassName("box")
        var aitem = document.getElementsByClassName("xinlang-a")

        for (var i = 0; i < liitem.length; i++) {
            (function (i) {
                liitem[i].onmousedown = function () {
                    for (var j = 0; j < boxitem.length; j++) {
                        boxitem[j].style.display = "none";
                        liitem[j].style.borderTop = "transparent";
                        liitem[j].style.borderLeft = "none";
                        liitem[j].style.borderRight = "none";
                        liitem[j].style.backgroundColor = "transparent";
                    }
                    boxitem[i].style.display = "block";
                    liitem[i].style.borderTop = "3px solid #ff8400";
                    liitem[i].style.borderLeft = "1px solid #dbdee1";
                    liitem[i].style.borderRight = "1px solid #dbdee1";
                    liitem[i].style.backgroundColor = "white";
                    if (i == 0) {
                        liitem[i].style.borderLeft = "none";
                    }
                }
            })(i)
        }

    </script> 
</body>
</html>

qq_51426429

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过js实现导航栏切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫