在前端开发中,可以通过以下步骤来实现在单击一个按钮时突出显示另一个按钮:
<button id="button1">按钮1</button>
<button id="button2">按钮2</button>
button {
/* 默认状态样式 */
background-color: #ccc;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
/* 鼠标悬停时的样式 */
background-color: #aaa;
}
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.addEventListener("click", function() {
// 移除按钮2的突出显示样式
button2.classList.remove("highlight");
// 添加按钮1的突出显示样式
button1.classList.add("highlight");
});
button2.addEventListener("click", function() {
// 移除按钮1的突出显示样式
button1.classList.remove("highlight");
// 添加按钮2的突出显示样式
button2.classList.add("highlight");
});
参考腾讯云产品:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云