whitesuperman 2022-02-19 17:09 采纳率: 71.4%
浏览 38
已结题

Javascript一列白色按钮点击其中任意一个按钮变黑,当第二次点击其他按钮时,希望第一个按钮从黑色变成灰色。

各位朋友,目前只做出来了点击一次图片,图片变色,点击第二次的时候,上一张图片不变灰。
我觉得有可能需要获取上一次鼠标点击事件,但是只是一个思路,我也不知道自己想的对不对。
大家如果有办法解决,麻烦大家解答一下,谢谢大家


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pro.html</title>
<style type="text/css">
.one {
    background-color: white;
}
 
.two {
    background-color: black;
}
    
.three {
    background-color: orange;
}
</style>
<!-- <script type="text/javascript" src="../jquery-1.8.0.min.js"></script> -->
<script type="text/javascript">
    window.onload = function ()
    {
        var ul = document.getElementsByTagName ('ul')[0];
        var imgs = ul.getElementsByTagName ('img');
        for ( var i = 0; i < imgs.length; i++)
        {
            imgs[i].parentElement.className = 'one';
            imgs[i].onclick = function ()
            {
                for ( var i = 0; i < imgs.length; i++)
                {
                    imgs[i].parentElement.className = 'one';
                }
                this.parentElement.className = 'two';
            };

        }
    }
</script>
</head>
<body>
    <ul>
        <li><a href="#" tittle="icon/one1_03.png"><b><img
                src="icon/one_03.png" /> </b> </a></li>
        <li><a href="#" tittle="icon/two2_03.png"><img
                src="icon/two_03.png" /> </a></li>
        <li><a href="javascript:goMenu('menu_business.html')"
            tittle="icon/three3_03.png"><img src="icon/three_03.png" /> </a></li>
        <li><a href="#" tittle="icon/four4_03.png"><img
                src="icon/four_03.png" /> </a></li>
        <li><a href="#" tittle="icon/five5_03.png"><img
                src="icon/five_03.png" /> </a></li>
        <li><a href="#" tittle="icon/six6_03.png"><img
                src="icon/six_03.png" /> </a></li>
        <li><a href="#" tittle="icon/seven7_03.png"><img
                src="icon/seven_03.png" /> </a></li>
        <div class="clear"></div>
    </ul>
</body>
</html>
  • 写回答

4条回答 默认 最新

  • 关注

    用一个变量记录上一次点击的对象即可

    
        window.onload = function ()
        {
            var ul = document.getElementsByTagName ('ul')[0];
            var imgs = ul.getElementsByTagName ('img');
            var upobj;
            for ( var i = 0; i < imgs.length; i++)
            {
                imgs[i].parentElement.className = 'one';
                imgs[i].onclick = function ()
                {
                    if (upobj == this) return;
                    if (upobj)
                        upobj.parentElement.className = 'three';
                    this.parentElement.className = 'two';
                    upobj = this;
                };
     
            }
        }
    
    

    如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 2月28日
  • 已采纳回答 2月20日
  • 修改了问题 2月19日
  • 创建了问题 2月19日

悬赏问题

  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来