jQuery之案例

最新推荐文章于 2022-05-13 11:40:29 发布

qq_41320857

最新推荐文章于 2022-05-13 11:40:29 发布

阅读量436

点赞数 1

分类专栏：编程语言文章标签：下拉列表动态创建列表高亮显示表单验证 tab切换

本文链接：https://blog.csdn.net/qq_41320857/article/details/81412131

版权

下拉列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(imgs/bg.jpg);
        }

        .wrap li {
            background-image: url(imgs/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //加载页面
        $(function () {
            $(".wrap>ul>li").mouseenter(function () {
                //从当前li中所有的子元素中找到ul
                //$(this).children("ul").show();//把里面的内容显示出来
                //传入参数可以实现渐变效果
                //$(this).children("ul").show(1000);

                //防止出现堵塞
                $(this).children("ul").stop().show(1000);
            });
            $(".wrap>ul>li").mouseleave(function () {
                $(this).children("ul").hide();//把里面的内容隐藏起来
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul class="ul">
                <li><a href="javascript:void(0);">二级菜单11</a></li>
                <li><a href="javascript:void(0);">二级菜单12</a></li>
                <li><a href="javascript:void(0);">二级菜单13</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单2</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单21</a></li>
                <li><a href="javascript:void(0);">二级菜单22</a></li>
                <li><a href="javascript:void(0);">二级菜单23</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单3</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单31</a></li>
                <li><a href="javascript:void(0);">二级菜单32</a></li>
                <li><a href="javascript:void(0);">二级菜单33</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

高亮显示

<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //鼠标进入事件
        $("#uu>li").mouseenter(function () {
            $(this).css("backgroundColor","red");
        });
        //鼠标离开事件
        $("#uu>li").mouseleave(function () {
            $(this).css("backgroundColor","");
        });
        //修改字体
        $("#uu>li").click(function () {
            $(this).css("fontColor","#ffffff");
            $(this).css("fontSize","30px");
            $(this).css("fontFamily","楷体");
        });
    });
</script>
<ul id="uu"&g

最低0.47元/天解锁文章

qq_41320857

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery之案例

下拉列表 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫

专栏目录