求助一个JS问题！！！

毕设助手 2024年04月16日 10:03 毕业设计 1

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

共4条回复我来回复

毕业设计工坊

这个人很懒，什么都没有留下～

 <!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);' onclick="changeColor(this)">段落一</a>
    <a href='javascript:void(0);' onclick="changeColor(this)">段落二</a>
    <a href='javascript:void(0);' onclick="changeColor(this)">段落三</a>
    <a href='javascript:void(0);' onclick="changeColor(this)">段落四</a>
  </body>
</html>

0条评论

代码港湾

这个人很懒，什么都没有留下～

 <!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="c59_5cd8_d823230 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>

0条评论

代码助手

这个人很懒，什么都没有留下～

 <!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 >一</p>
    <p >二</p>
    <p >三</p>
    <p >四</p>
    <p >五</p>
  </body>
  <script type="text/javascript">
    $(".zi").click(function(){
      $(".zi").removeClass("red");
      $(this).addClass("red");
    });
  </script>
</html>

0条评论

源码驿站

这个人很懒，什么都没有留下～

 <!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 >文字</span>
  <br />
  <span >文字二</span>
</body>
</html>

0条评论

发表回复

登录后才能评论

求助一个JS问题！！！

回复

发表回复

随便看看

热门回答