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 HFSS 中的 H 场图与 MATLAB 中绘制的 B1 场 部分对应不上
  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？