时间戳

首页 > 解决方案 > 如何在单击时更改颜色

html - 如何在单击时更改颜色

问题描述

我目前正在制作一个警报页面，如果发生警报，​​它将通知客户电子邮件。工作人员会查看警报页面，如果他们看到任何奇怪的东西，就会确认警报。在我的代码中，我想将按钮 Acknowledge 的颜色和文本更改为不同的颜色，并将文本更改为“Been Acknowledge”，但是当我尝试使用 onlick() 更改 css 中的背景颜色时，它会将页面从白色更改为我想要的颜色，而不是仅仅改变按钮的颜色。

table th:nth-child(3), td:nth-child(3) {
    display: none;
    
}
body{
    padding-left: 20px;
    padding-right: 20px;
}
#Logo {
    position:fixed;
    top:30px;
    width:300px;
    height:46px;
    display:flex;
}
#h1 {
    position:fixed;
    top: 20px;
    right: 20px;
    color:#828282;
    font-size:39px;
}
#h2 {
    text-align: center;
    color:#828282;
    font-size:39px;
}

.button {
    background-color: #549fd8;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 2px 22px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
  }
<!DOCTYPE html>   
<html lang="en">   
<head>   
<meta charset="utf-8">   
<title>Alert Page</title>   
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
<script type="text/javascript" src="ajax.js"></script>
<link rel="stylesheet" href="alertStyle.css"></style>
</head>  
<body style="margin:20px auto"> 
    <div id="Logo">
        <img id="Logo_img" class="img " src="logo.png"/>
    </div>
    <div id="h1">
        <p><span>Log in</span></p>
    </div>
    <div id="h2">
        <p><span>Alert Page</span></p>
    </div>
    <hr>
<div class="container"></div>

<table id="myTable" class="table table-striped" >  
        <thead>  
          <tr>  
            <th>Timestamp</th>  
            <th>Hostname</th>  
            <th>File</th>
            <th>Change_agent</th> 
            <th>Change_process</th>
            <th>Acknowledge Alerts</th> 
            <th>Number</th> 
            <th>Letter</th> 
          </tr>  
        </thead>  
        <tbody>  
          <tr>  
            <td>04/02/22 12:37:00 PM</td>  
            <td>Aaron</td>  
            <td>C:/Programe_Files/</td>
            <td>JohnAcc</td>  
            <td>Microsoft_Word</td>
            <td><button class="button">Acknowledge</button></td>
            <td>2</td> 
            <td>A</td> 
          </tr>  
          <tr>  
            <td>04/02/22 12:37:00 PM</td>  
            <td>Tim</td>    
            <td>C:/Programe_Files/</td>
            <td>JohnAcc</td>  
            <td>Microsoft_Word</td>  
            <td><button class="button">Acknowledge</button></td>
            <td>3</td> 
            <td>B</td> 
          </tr>  
          <tr>  
            <td>04/02/22 12:37:00 PM</td>  
            <td>Kale</td>  
            <td>C:/Programe_Files/</td>
            <td>JohnAcc</td>  
            <td>Microsoft_Word</td>  
            <td><button class="button">Acknowledge</button></td> 
            <td>4</td> 
            <td>C</td> 
          </tr>  
           <tr>  
            <td>04/02/22 12:37:00 PM</td>  
            <td>myhost.example.com</td>  
            <td>C:/Programe_Files/</td>
            <td>JohnAcc</td>  
            <td>Microsoft_Word</td>  
            <td><button class="button">Acknowledge</button></td>  
            <td>5</td> 
            <td>D</td> 
          </tr>  
          <tr>  
            <td>04/02/22 12:37:00 PM</td>  
            <td>myhost.example.com</td>   
            <td>C:/Programe_Files/</td>
            <td>JohnAcc</td>  
            <td>Microsoft_Word</td>  
            <td><button class="button">Acknowledge</button></td>  
            <td>6</td> 
            <td>F</td> 
          </tr>  
          <tr>  
            <td>04/02/22 12:37:00 PM</td>  
            <td>myhost.example.com</td>  
            <td>C:/Programe_Files/</td>
            <td>JohnAcc</td>  
            <td>Microsoft_Word</td>  
            <td><button class="button">Acknowledge</button></td>   
            <td>7</td> 
            <td>H</td> 
          </tr>  
           <tr>  
            <td>04/02/22 12:37:00 PM</td>  
            <td>myhost.example.com</td>  
            <td>C:/Programe_Files/</td>
            <td>JohnAcc</td>  
            <td>Microsoft_Word</td>  
            <td><button class="button">Acknowledge</button></td>
            <td>8</td> 
            <td>I</td> 
          </tr>  
        </tbody>  
      </table>  
      </div>
    <hr>
</body>  
<script>
$(document).ready(function() {
    $('#myTable').DataTable( {
        responsive: true,
        "pageLength": 4
    } );
} );
</script>
</html>

标签： htmlcss

解决方案

您可以使用：

  $('.button').click(function() {
     $(this).css("background","#color_you_want");
     $(this).text("Been Acknowledge");
    });

LE：如果按钮是动态添加的，请使用：

 $('body').on('click','.button', function() {
     $(this).css("background","#color_you_want");
     $(this).text("Been Acknowledge");
    });

这应该在 $(document).ready(function() {..}) 里面

推荐阅读