jquery点击变色，其余恢复原色

最新推荐文章于 2024-07-03 02:57:21 发布

qq_46063760

最新推荐文章于 2024-07-03 02:57:21 发布

阅读量811

点赞数 2

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_46063760/article/details/128847009

版权

事件和样式互不干扰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/plugins/jquery.min.js"></script>
    <style>
     .dianji> div  {
            background-color: #fff ;
            height: 60px;
            display: inline-block;
            line-height: 60px;
           padding: 0 30px;

        }
    </style>
</head>
<body>
    <div class="dianji">
    <div id="1" onclick="dianjimetods(id)">1</div>
    <div id="2" onclick="dianjimetods(id)">2</div>
    <div id="3" onclick="dianjimetods(id)">3</div>
    <div id="4" onclick="dianjimetods(id)">4</div>
    </div>
    <script>
    var bts = document.querySelectorAll('.dianji>div')
    console.log(bts)
    function   dianjimetods(id){
    console.log(id)
   
    for( var i =0 ;i<bts.length;i++){
        bts[i].style.backgroundColor='';
       
    }
    $('#'+id).css('background-color','red')
  }
    </script>
</body>
</html>