求助一个JS问题！！！

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

给您写了一个纯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>

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

    <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>

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

$.hover(function(){设置你学变红},function(){取消红色设置})

写一个点击事件，每一次点击之前把字体样式还原，然后在修改此次点击文字的样式

首先最简单啊：将选中的样式和未选中的样式分别写在两个class里，当点击是this.addclass(选中的class) ，选中别的时先全部removeclass（选中样式）然后的this.addclass(
选中的class)

为啥不用a标签，设置本来的样式和悬浮的样式

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <!--[if IE]>
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="generator" content="">
        <title>
            test 1.0
        </title>
        <script type="text/javascript" src="./jquery.js">
        </script>
        <style type="text/css">
            .zi{color:black;}
            .red{color:red !important;}
        </style>
    </head>
    <body>
        <p class="zi red" >一</p>
        <p class="zi" >二</p>
        <p class="zi" >三</p>
        <p class="zi" >四</p>
        <p class="zi" >五</p>
    </body>
    <script type="text/javascript">
        $(".zi").click(function(){
            $(".zi").removeClass("red");
            $(this).addClass("red");
        });
    </script>

</html>

var count=0; function change(){ if(count==0){ document.getElementById('id1').style.color='red'; count++; } else{ document.getElementById('id1').style.color='black'; count=0; } }

onclick="chang()">
点击这里！

在你要设置的文字上加.active ,点击的时候加上去，并且变色
$（".active"）.css('color','red');

这个问题其实不像看起来那么简单，提问的烦恼可能在于不知道如何获取到具体的字，还要为字设置颜色，
如果字少的话，可以给每个字加标签，然后用点击事件控制
如果字多的话，也没什么好办法，可以用js来加字，就是在初始化的时候，写个方法，接收字符串，然后拆分每个字符，加上标签，只要有标签，肯定就可以控制了，希望可以帮到提问者

jQuery的addClass 和removeClass就可以了，先定义一个class ，比如 .active_color{ color:red }
所有的文字加上点击事件 ,假如你所有的文本都有text样式，当然你也可以根据其它获取
$(".text").click({
$(".active_color").removeClass("active_color");
$(this).addClass("active_color");
});

$.hover(function(){设置样式红色},function(){取消红色})

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../public/jquery-2.0.0.js"></script>
    <style>
        .orgColor {
            font-size: 5px;
            cursor: pointer;
            color: gray;
        }
        .redColor {
            color: red !important;
        }
    </style>
    <script>
        $(function () {
            $(".orgColor").click(function () {
                $(".redColor").removeClass("redColor");
                $(this).addClass("redColor");
            });
        });
    </script>
</head>
<body>
    <span class="orgColor">文字</span>
    <br />
    <span class="orgColor">文字二</span>
</body>
</html>

我写了一个不实用但是我觉得蛮好玩vue的，分享给你

aaa

bbb

currentRef(e) {
var ts = document.querySelectorAll('.TT');
ts.forEach(t => t.style.color = '')
e.toElement.style.color = 'red';
}

jquery 的 toggleClass方法很容易就可以写出简洁的效果出来。采纳了垃圾实现哈

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            width:100px;
            height:30px;
            background-color: darkgreen;
            color:#fff;
            text-align: center;
            line-height:30px;
            float:left;
            list-style: none;
        }
        .active{
            color: darkred;
        }
    </style>
</head>
<body>
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
<script>
        var lis = document.querySelectorAll('li');

            for(var i = 0; i < lis.length; i++){
                lis[i].onclick = function(){
                    //通过for循环将所有的li标签文本的颜色 置为默认
                    for(var j = 0; j < lis.length; j++){
                        lis[j].className = '';
                    }
                    //当前被电击的li标签变颜色
                    this.className = 'active';
                }
            }


</script>
</html>

toggleClass