是一种常见的前端开发技术,用于在用户选择单选按钮时动态改变元素的样式或行为。通过添加或删除类,可以实现对元素的样式、动画、事件等进行控制。
具体实现方式可以使用JavaScript来操作DOM元素,通过监听单选按钮的状态变化事件,当单选按钮被选中时,使用classList.add()方法添加指定的类名,当单选按钮未被选中时,使用classList.remove()方法移除指定的类名。
以下是一个示例代码:
HTML:
<input type="radio" name="option" id="option1">
<label for="option1">Option 1</label>
<input type="radio" name="option" id="option2">
<label for="option2">Option 2</label>
<div id="target">This is the target element</div>
CSS:
.selected {
color: red;
font-weight: bold;
}
JavaScript:
const option1 = document.getElementById('option1');
const option2 = document.getElementById('option2');
const target = document.getElementById('target');
option1.addEventListener('change', function() {
if (this.checked) {
target.classList.add('selected');
} else {
target.classList.remove('selected');
}
});
option2.addEventListener('change', function() {
if (this.checked) {
target.classList.add('selected');
} else {
target.classList.remove('selected');
}
});
在上述代码中,我们定义了两个单选按钮(option1和option2),以及一个目标元素(target)。当单选按钮被选中时,通过添加类名"selected"来改变目标元素的样式。
这种技术可以应用于各种场景,例如在表单中根据用户选择的选项显示不同的内容、实现交互式的导航菜单等。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云