jquery鼠标点击改变控件的背景颜色

最新推荐文章于 2022-06-28 13:55:06 发布

goadin

最新推荐文章于 2022-06-28 13:55:06 发布

阅读量1.7w

点赞数 1

分类专栏： html页面文章标签： html 单击事件改变背景颜色

本文链接：https://blog.youkuaiyun.com/goadin/article/details/51392252

版权

html页面专栏收录该内容

6 篇文章

订阅专栏

这篇博客详细记录了如何使用jQuery监听鼠标点击事件，动态改变HTML控件的背景颜色。通过示例代码，展示了jQuery的强大功能及其在前端交互中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下：

<script type="text/javascript">
    $(function () {
        //初始化控件，并注册事件
        var clickItem = function () {
            $(".itemID 子控件名称").css("background", "");
            $(".itemID 子控件名称").mouseover(function () {
                $(this).css("background", "#588600");
            })
                .mouseout(function () {
                    $(this).css("background", "");
                })
        };
        clickItem();
        $(".itemID 子控件名称").click(function () {
                clickItem();
                //当前被点击的控件改变背景色
                $(this).css("background", "#588600");
                //取消当前控件的mouseout和mouseover事件
                $(this).unbind("mouseout");
                $(this).unbind("mouseover");
            });
    })
</script>

完整代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{: get_title()}</title>
<link rel="stylesheet" type="text/css" href="__CSS__/style.css" />
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var initLi = function () {
            $(".u_menu ul li").css("background", "");
            $(".u_menu ul li").mouseover(function () {
                $(this).css("background", "#eee");
            })
                .mouseout(function () {
                    $(this).css("background", "");
                })
        };
        initLi();
        $(".u_menu ul li").click(function () {
                initLi();
                //当前被点击的控件改变背景色
                $(this).css("background", "#eee");
                //取消当前控件的mouseout和mouseover事件
                $(this).unbind("mouseout");
                $(this).unbind("mouseover");
            });
})
</script>
</head>
<body>
<div id="main_container">
        <div id="u_menu" class="u_menu">
            <ul>
                <li><a href="javascript:0;">基本信息</a></li>
                <li>修改密码</li>
                <li>个人订单</li>
            </ul>
        </div>
   </div>
</div> 
</body>
</html>