写一段根据选择是否单选框 展示不同的页面的代码
时间: 2024-05-01 07:17:38 浏览: 14
好的,下面是一个简单的示例代码,根据单选框的选择展示不同的页面:
HTML代码:
```
<div>
<input type="radio" name="pageSelection" value="page1" checked>Page 1
<input type="radio" name="pageSelection" value="page2">Page 2
<input type="radio" name="pageSelection" value="page3">Page 3
</div>
<div id="page1" class="page">This is page 1</div>
<div id="page2" class="page" style="display:none;">This is page 2</div>
<div id="page3" class="page" style="display:none;">This is page 3</div>
```
JavaScript代码:
```
var pageSelection = document.getElementsByName('pageSelection');
for (var i = 0, length = pageSelection.length; i < length; i++) {
pageSelection[i].onclick = function() {
var value = this.value;
var pages = document.getElementsByClassName('page');
for (var j = 0, len = pages.length; j < len; j++) {
if (pages[j].id === value) {
pages[j].style.display = 'block';
} else {
pages[j].style.display = 'none';
}
}
};
}
```
这个代码会根据单选框的选择,显示或隐藏不同的页面。在HTML代码中,我们定义了三个页面,并为每个页面设置了一个ID和类名。在JavaScript代码中,我们获取单选框元素并为其添加一个单击事件监听器。当单选框被单击时,我们获取所选值并使用for循环遍历所有页面,如果当前页面的ID与所选值相同,则将其显示,否则将其隐藏。