javascript中根据不同的值展示不同的div如何实现代码
时间: 2023-10-31 10:04:12 浏览: 125
可以使用条件语句和DOM操作来实现。以下是一个示例代码:
HTML部分:
```html
<div>
<button onclick="showDiv('div1')">展示第一个div</button>
<button onclick="showDiv('div2')">展示第二个div</button>
</div>
<div id="div1" style="display:none;">
这是第一个div
</div>
<div id="div2" style="display:none;">
这是第二个div
</div>
```
JavaScript部分:
```js
function showDiv(divId) {
// 隐藏所有的div
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
// 显示指定的div
var div = document.getElementById(divId);
div.style.display = "block";
}
```
在上面的示例代码中,我们给两个按钮绑定了一个onclick事件,当用户点击按钮时,会调用showDiv函数并传入对应div的id。showDiv函数中,首先获取所有的div元素,然后将它们的display样式设置为none,这样就隐藏了所有的div。接着,根据传入的divId获取对应的div元素,并将其display样式设置为block,这样就显示了指定的div。
阅读全文