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日

悬赏问题

  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写,需写出详细代码,代价私
  • ¥15 ROS系统搭建请教(跨境电商用途)