这里说明一下,HTML要隐藏部分控件就要使用到display这个属性(这个是不占位置的写法),把他设置为none就可以隐藏所需要的控件。而要触发点击,我们只需要把他设置成为一个按钮就可以了。
“display:none
”的意思是设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏元素。
“display:none
”样式依照词义真正隐藏元素。
display
属性规定元素应该生成的框的类型,当其值为“none
”时可以规定元素不生成框。
使用display属性,被隐藏的元素不占据任何空间。不仅如此,一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效。
使用“display:none
”,不占据空间,把元素隐藏起来,所以动态改变此属性时会引起重排(改变页面布局),可以理解成在页面中把该元素删除掉一样;不会被子孙继承,但是其子孙是不会显示的,毕竟都一起被隐藏了。
下面我说一下实例:
这里我先说一下body里面的代码:
我在body里面设置了两个按钮,点击1和点击2
<button id="btn1" onclick="btn1()">点击1</button>
<button id="btn4" onclick="btn4()">点击2</button>
<div id="div1" style=" display: block;">
<p>第一个盒子</p>
</div>
<div id="div2" style=" display: none;">
<p>第二个盒子</p>
</div>
js代码如下:
<script type="text/javascript">
function btn1() {
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'none';
}
function btn4() {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'block';
}
</script>
在js代码我写了两个函数,btn1和btn4,点击就会触发按钮事件
运行效果:
点击2之后:
点击1之后:
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于display尝试</title>
<script type="text/javascript">
function btn1() {
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'none';
}
function btn4() {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'block';
}
</script>
</head>
<body>
<button id="btn1" onclick="btn1()">点击1</button>
<button id="btn4" onclick="btn4()">点击2</button>
<div id="div1" style=" display: block;">
<p>第一个盒子</p>
</div>
<div id="div2" style=" display: none;">
<p>第二个盒子</p>
</div>
</body>
</html>
希望这篇文章可以帮助到你,谢谢。