JavaScript节点练习

最新推荐文章于 2023-09-17 18:45:59 发布

不会咋办

最新推荐文章于 2023-09-17 18:45:59 发布

阅读量65

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43201652/article/details/127271109

版权

使用节点实现侧边导航栏的切换

<!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>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3697358_89nxdcbhjbm.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        i.iconfont{
            color: rgb(0, 128, 255);
        }
        .foucs i.iconfont{
            color: #fff;
        }
        .side{
            width: 100px;
            height: 190px;
            position: fixed;
            left: 50px;
            top: 20%;
            border: 1px solid #999;
            border-radius: 10px;
        }
        .side>li{
            width: 80px;
            height: 40px;
            padding: 0 10px;
            line-height: 40px;
            margin-bottom: 10px;
            position: relative;
            border-radius: 10px;
            text-align: center;
        }
        .side>li>div{
            position: absolute;
            width: 100px;
            text-align: center;
            line-height: 2;
            left: 100px;
            border: 2px solid #999;
            border-radius: 10px;
            box-sizing: border-box;
            display: none;
        }
        .foucs{
            background-color: rgb(0, 136, 255);
            color: #fff;
        }
        .side>li>.show{
            display: block;
            color: #000;
        }
    </style>
</head>
<body>
    <ul class="side" id="side">
        <li>
            <div>
                <p>国内酒店</p> 
                <p>国外酒店</p> 
            </div>
            <p><i class="iconfont icon-jiudian"></i> 酒店</p>
        </li>
        <li>
            <div>
                <p>特价机票</p> 
                <p>航班动态</p>
                <p>值机选座</p> 
                <p>退票改签</p> 
            </div>
            <p><i class="iconfont icon-feiji"></i> 机票</p>
        </li>
        <li>
            <div>
                <p>国内火车票</p> 
                <p>国际火车票</p> 
            </div>
            <p><i class="iconfont icon-huoche"></i> 火车票</p>
        </li>
        <li>
            <div>
                <p>周末游</p> 
                <p>跟团游</p> 
                <p>私家团</p> 
                <p>自由行</p> 
            </div>
            <p><i class="iconfont icon-lvyou"></i> 旅游</p>
        </li>
        
    </ul>
    <script>
        var ulnode=document.getElementById("side")
        var linodes=ulnode.children
        for(var i=0;i<linodes.length;i++){
            linodes[i].onclick=function(){
                for(var j=0;j<linodes.length;j++){
                    linodes[j].className=""    
                    linodes[j].children[0].className=""
                }
                this.className="foucs"
                this.children[0].className="show" 
            }
        }
    </script>
</body>
</html>