使用 JavaScript 显示/隐藏 DIV
Show / Hide DIVs with JavaScript
我是HTML和JavaScript的新手,我遇到了一个小问题我有 3 个分区
<div id="div1"> I'm div1 </div>
<div id="div2"> I'm div2 </div>
<div id="div3"> I'm div3 </div>
我有 3 个按钮,每个按钮都启用相应的 DIV,并禁用其他按钮一次只显示 1 个 DIV。
<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv1()" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv2()" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv3()" />
我已经搜索了多个解决方案,它们只显示了如何启用,我不知道为什么,我无法禁用它们。
查看可见性选项。简而言之,在您的函数中,您应该调用getElementById
(对于要修改的div 的 if),然后将找到的元素样式的可见性属性更改为hidden
(隐藏元素)或visible
(显示它)。
function showDiv1(){
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
}
只是隐藏div - 如果你想占用 Div 空间
function Hide()
{
document.getElementById('div1').style.visibility="hidden";
}
隐藏和删除 Div 元素的占用空间
function Hide()
{
document.getElementById('div1').style.display="none";
}
有
几种方法可以做到这一点,减少重复代码的步骤是这样的:
<div id=div1> I'm div1 </div>
<div id=div2> I'm div2 </div>
<div id=div3> I'm div3 </div>
<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv('1')" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv('2')" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv('3')" />
.JS:
function showDiv(num) {
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
document.getElementById('div'+num).style.display='block'
}
小提琴
这是一个使用纯 js 的简单解决方案:
<div id=div1> I'm div1 </div>
<div id=div2> I'm div2 </div>
<div id=div3> I'm div3 </div>
<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv('div1')" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv('div2')" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv('div3')" />
<script>
function showDiv(id) {
var divs = document.querySelectorAll("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
var divToShow = document.getElementById(id);
divToShow.style.display = "block";
}
</script>
JSFiddle
这是显示/隐藏的简单版本.HTML:
<input type="button" name="Showdiv1" value="div1" />
<input type="button" name="Showdiv2" value="div2" />
<input type="button" name="Showdiv3" value="div3" />
<div id="div1">I'm div1</div>
<div id="div2">I'm div2</div>
<div id="div3">I'm div3</div>
JQuery:
$('input[type="button"]').on('click', function () {
var div = "#" + $(this).val();
$('div').hide()
$(div).show()
})
JSFiddle
更新:由于您在纯js中提到,因此这里是方法
<input type="button" name="Showdiv1" value="div1" onclick="showDiv(this)" />
<input type="button" name="Showdiv2" value="div2" onclick="showDiv(this)" />
<input type="button" name="Showdiv3" value="div3" onclick="showDiv(this)" />
<div id="div1">I'm div1</div>
<div id="div2">I'm div2</div>
<div id="div3">I'm div3</div>
.JS:
function showDiv(that) {
var len = document.getElementsByTagName('div').length;
for (var i = 0; i < len; i++) {
document.getElementsByTagName('div')[i].style.display = "none";
}
var val = that.value;
document.getElementById(val).style.display = "block";
}
JSFiddle
相关文章:
- Onchange没有'不要显示或隐藏Div
- 当DIV的高度低于某个数字时,隐藏DIV的正确逻辑是什么
- 如何使用Javascript替换和隐藏Div内容
- 单击javascript按钮显示/隐藏Div元素
- 隐藏 DIV 标签,直到填充所有文本字段
- 检测HTML5视频是否正在播放或暂停,并相应地显示或隐藏Div
- 通过点击隐藏DIV,并通过JavaScript显示另一个DIV
- 如果另一个存在jQuery,则隐藏Div
- 使用JS隐藏Div(简单)
- 根据搜索内容和Div中的文本值隐藏Div
- 使用 javascript 在 DOM 中隐藏 DIV 中的文本,具体取决于另一个 DIV 中的文本
- 如果显示 n/a 值,则隐藏 DIV
- 我将如何制作一个使用纯JavaScript在点击时隐藏DIV的系统
- 如果文本为 0,JavaScript 隐藏 DIV 标记
- 从选择选项中隐藏 Div 时
- 在鼠标悬停时显示/隐藏 DIV
- 使用 JavaScript 显示/隐藏 DIV
- 显示/隐藏 Div 仅由按钮触发
- 根据选择语句选项隐藏 Div 类
- 隐藏 DIV,如果窗口窄于 DIV,则替换为 DIV