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>

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


    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

可以定义一个数组，保存按钮的状态，单击时读取数组的值，判断状态，再改变样式。

推荐使用数组或者类数组结构，把点击的设置为active状态，点击过的设置为actived状态，这样 active 状态设置为黑色，actived设置为灰色。

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632