这里提供一个示例代码,演示如何使用按钮使一行活动,而其他行不活动。
HTML代码:
第一行
第二行
第三行
JavaScript代码:
function activateRow(rowNumber) {
// 移除所有行的活动状态
var rows = document.getElementsByClassName("row");
for (var i = 0; i < rows.length; i++) {
rows[i].classList.remove("active");
}
// 添加指定行的活动状态
var row = document.getElementById("row" + rowNumber);
row.classList.add("active");
}
CSS代码:
/* 定义活动状态的样式 */
.active {
background-color: yellow;
}
在这个示例中,点击按钮时会调用activateRow()
函数,并传入对应的行号作为参数。该函数首先移除所有行的活动状态,然后再为指定的行添加活动状态。通过CSS定义活动状态的样式,使得活动行显示为黄色背景色。
请注意,这只是一个示例,具体实现方式可能会因为你的具体需求而有所不同。你可以根据自己的实际情况修改代码来满足你的需求。