jQuery选择器练习

lu__lala

于 2021-10-28 18:55:39 发布

阅读量267

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/lu__lala/article/details/121020740

版权

HTML CSS JavaScript 导航菜单交互设计

关键词由CSDN通过智能技术生成

要求：

设置导航栏整体背景颜色为#cccccc

设置导航栏第一项默认背景颜色为#cccc73

设置二级菜单奇数行的背景颜色为#eec

设置菜单栏偶数行的背景颜色为#fcc00


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>导航下拉菜单</title>
    <script src="../lib/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .nav {
        width: 600px;
        margin: 80px auto;
        color: #333;
        border-radius: 6px;
        height: 50px;
        border: 1px solid #666;

        }

        .nav li {
            width: 140px;
            height: 50px;
            line-height: 50px;
            /* background: #17adf3; */
            float: left;
            text-align: center;
            /* margin-left: 10px; */
            cursor: pointer;
            _display: inline;
            position: relative;
        }

        li ul {
            position: absolute;
            left: 0;
            top: 50px;
            display: none;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li id="phone">
            <span>最热手机</span>
            <ul id="ul01">
                <li>小米10 pro</li>
                <li>华为 P40 Pro+</li>
                <li>三星S21 edge</li>
            </ul>
        </li>
        <li id="home">
            <span>家用商品</span>
            <ul id="ul02">
                <li>智能电饭煲</li>
                <li>微波炉</li>
                <li>电水壶</li>
            </ul>
        </li>
        <li id="outer">
            <span>户外产品</span>
            <ul id="ul03">
                <li>登山鞋</li>
                <li>冲锋衣</li>
                <li>智能手表</li>
            </ul>
        </li>
    </ul>

</body>

</html>

<script>
    function fn(canshu1, canshu2) {
        var li01 = document.getElementById(canshu1);
        var ul01 = document.getElementById(canshu2);

        li01.onmouseover = function () {
            ul01.style.display = "block"
        }
        li01.onmouseout = function () {
            ul01.style.display = "none"
        }
    }
    fn("phone", "ul01");
    fn("home", "ul02");
    fn("outer", "ul03");

    $(function (){
        $('ul').css('background-color','#cccccc');
        $('.nav>li').css('background-color','#cccc73');
        $('.nav ul>li:even').css('background-color','#eec');
        $('.nav ul>li:odd').css('background-color','#ffcc00');
    });

</script>