andy_13 2017-12-25 08:44 采纳率: 85.7%
浏览 1446
已采纳

求助一个JS问题！！！

用JS怎么实现点击一个文字变成红色，再点击其它文字，原本变成红色的文字恢复原样，被点击的文字变成红色！！

  • 写回答

16条回答 默认 最新

  • catfishlyf 2017-12-25 10:44
    关注

    给您写了一个纯JS版本的

     <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript">
            var demo=document.getElementsByClassName("content");
            function changeColor(self){ 
                var demo=document.getElementsByClassName("content");
                for(var i=0;i<demo.length;i++){
                    console.log(demo[i]);
                    if(demo[i].style.color="#FF0000"){
                        demo[i].style.color="#000000";
                    }
                } 
                self.style.color="#ff0000";  
            }
        </script>

        <style type="text/css">
            a{text-decoration-line: none;}
            .content{color:#000000;}
            .red{color:#FF0000;}

        </style>
    </head>
    <body>
        <a href='javascript:void(0);' class="content red" onclick="changeColor(this)">段落一</a>
        <a href='javascript:void(0);' class="content" onclick="changeColor(this)">段落二</a>
        <a href='javascript:void(0);' class="content" onclick="changeColor(this)">段落三</a>
        <a href='javascript:void(0);' class="content" onclick="changeColor(this)">段落四</a>
    </body>
</html>

    预览效果是这样的（由于不同浏览器的原因，请忽略颜色，运行起来的效果是您要的）：



    <br> var demo=document.getElementsByClassName(&quot;content&quot;);<br> function changeColor(self){ <br> var demo=document.getElementsByClassName(&quot;content&quot;);<br> for(var i=0;i<demo.length;i++){<br> console.log(demo[i]);<br> if(demo[i].style.color="#FF0000"){<br> demo[i].style.color="#000000";<br> }<br> } <br> self.style.color="#ff0000"; <br> }<br> 
        <style type="text/css">
        a{text-decoration-line: none;}
        .content{color:#000000;}
        .red{color:#FF0000;}

    </style>
</head>
<body>
    <a href='javascript:void(0);' class="content red" onclick="changeColor(this)">段落一</a>
    <a href='javascript:void(0);' class="content" onclick="changeColor(this)">段落二</a>
    <a href='javascript:void(0);' class="content" onclick="changeColor(this)">段落三</a>
    <a href='javascript:void(0);' class="content" onclick="changeColor(this)">段落四</a>
</body>

    如果对您有帮助，请采纳，感谢您的支持！

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

报告相同问题？

悬赏问题

  • ¥15 outlook无法配置成功
  • ¥15 Pwm双极模式H桥驱动控制电机
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换