写一个html文件,左边是六个选项按钮,右边是显示内容部分
时间: 2024-05-07 16:24:03 浏览: 42
好的,我可以回答这个问题。您可以参考以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>选项按钮示例</title>
<meta charset="utf-8">
</head>
<body>
<h1>选项按钮示例</h1>
<p>请选择以下选项:</p>
<form>
<input type="radio" name="option" value="option1" id="option1"><label for="option1">选项1</label><br>
<input type="radio" name="option" value="option2" id="option2"><label for="option2">选项2</label><br>
<input type="radio" name="option" value="option3" id="option3"><label for="option3">选项3</label><br>
<input type="radio" name="option" value="option4" id="option4"><label for="option4">选项4</label><br>
<input type="radio" name="option" value="option5" id="option5"><label for="option5">选项5</label><br>
<input type="radio" name="option" value="option6" id="option6"><label for="option6">选项6</label><br>
</form>
<div id="content"></div>
<script>
// 监听选项按钮的选择
document.querySelectorAll('input[type="radio"]').forEach(function(radio) {
radio.addEventListener('change', function(event) {
var option = event.target.value;
// 根据选择展示不同的内容
switch(option) {
case 'option1':
showContent('选项一被选中');
break;
case 'option2':
showContent('选项二被选中');
break;
case 'option3':
showContent('选项三被选中');
break;
case 'option4':
showContent('选项四被选中');
break;
case 'option5':
showContent('选项五被选中');
break;
case 'option6':
showContent('选项六被选中');
break;
}
});
});
// 展示内容
function showContent(text) {
document.getElementById('content').textContent = text;
}
</script>
</body>
</html>
```
希望对您有所帮助!