javascript - js这个哪里写的不对呢？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - js这个哪里写的不对呢？

PHP中文网 2017-04-11 10:08:24

[JavaScript讨论组]

300

点哪个就让哪个变成蓝色同时其它的都变成没有颜色呢这样写为什么不对？

PHP中文网

认证0级讲师

全部回复(3)

天蓬老师2017-04-11 10:10:24 3楼

<!DOCTYPE html>
<html>
<head>

<title></title>
<style type="text/css">
    #p1{width: 200px;height: 100px;}
    #p1 span{display: inline-block;width:50px;height: 30px; }
</style>
<script type="text/javascript">
    window.onload=function(){
        var oSm=document.getElementsByName('sm');
        for(i=0;i<oSm.length;i++){
            oSm[i].style.backgroundColor="";
            oSm[i].onclick=function(){
                var _oSm=document.getElementsByName('sm');
                for(i=0;i<_oSm.length;i++) {
                    _oSm[i].style.backgroundColor = "";
                }
                this.style.backgroundColor="blue";

            }
        }
    }
</script>

</head>
<body>
<p id="p1">

<span name="sm">aaa</span>
<span name="sm">bbb</span>

</p>
</body>
</html>

赞 +0

添加回复

巴扎黑2017-04-11 10:10:24 2楼

因为你点击的时候只执行this.style.backgroundColor="blue";这个

赞 +0

添加回复

ringa_lee2017-04-11 10:10:24 1楼

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    #p1{width: 200px;height: 100px;}
    #p1 span{display: inline-block;width:50px;height: 30px; }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oSm=document.getElementsByName('sm');
            for(var i=0;i<oSm.length;i++){
                oSm[i].onclick=function(){
                    //去掉所有的样式
                    for(var j=0;j<oSm.length;j++){
                        oSm[j].style.backgroundColor='';
                    }
                    //当前的变色
                    this.style.backgroundColor="blue";
                }
            }
        }
    </script>
</head>
<body>
<p id="p1">
    <span name="sm">aaa</span>
    <span name="sm">bbb</span>
</p>
</body>
</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>