html+css+js写一个所选按钮页面对应按钮变色的代码
时间: 2023-12-16 12:05:11 浏览: 55
以下是一个简单的HTML+CSS+JS代码示例,实现了点击所选按钮使页面对应按钮变色的功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>Button Color Change Example</title>
<style>
/* 默认按钮样式 */
button {
background-color: white;
color: black;
border: 2px solid black;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
/* 所选按钮样式 */
button.selected {
background-color: black;
color: white;
}
</style>
</head>
<body>
<button onclick="selectButton(1)">按钮1</button>
<button onclick="selectButton(2)">按钮2</button>
<button onclick="selectButton(3)">按钮3</button>
<script>
function selectButton(index) {
// 获取所有按钮元素
var buttons = document.getElementsByTagName("button");
// 取消之前选中的按钮的选中状态
for (var i = 0; i < buttons.length; i++) {
buttons[i].classList.remove("selected");
}
// 将选中的按钮设置为选中状态
buttons[index - 1].classList.add("selected");
}
</script>
</body>
</html>
```
您可以在浏览器中打开该 HTML 文件并单击不同的按钮来测试该功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)