<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
border: 1px solid red;
}
#list{
display: none;
}
</style>
</head>
<body>
<p><span>+</span> 家庭成员</p>
<ul id="list">
<li>爸爸</li>
<li>妈妈</li>
<li>弟弟</li>
</ul>
<script>
var indi = document.getElementsByTagName("span")[0];
var list = document.getElementById("list");
indi.onclick = function(){
if(indi.innerHTML == "+"){
list.style.display = "block";
indi.innerHTML = "-";
}else{
list.style.display = "none";
indi.innerHTML = "+";
}
}
</script>
</body>
</html>
style.visibility和style.display都可以实现对页的隐藏,但visibility要占用域的空间,而display则不占用:
- 将元素display属性设为 block,会在该元素后换行。
- 将元素display属性设为 inline,会消除元素换行.
- 将元素display属性设为 none,隐藏该元素内容,且不占用域的空间。
- 将元素visibility属性设为 hidden,隐藏该元素内容,但占用域的空间。
将元素visibility属性设为 visible,显示元素内容。
- 如果是点击元素实现对应区域的内容切换效果,采用display属性,如果使用visibility,设置为visibility:hidden;属性的元素即使隐藏也占据原本的空间,这样其之后的元素将无法上移。举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
body{
color: black;
}
#div{
width: 270px;
height: 170px;
margin: 0px auto;
}
ul li{
list-style-type: none;
}
#nav{
float: left;
width: 50px;
height: 170px;
}
#nav ul li{
height: 50px;
background-color: silver;
line-height: 50px;
text-align: center;
margin: 5px;
}
#music,#books{
width: 200px;
height: 170px;
float: left;
margin: 10px;
}
#books{
visibility: hidden;
}
</style>
</head>
<body>
<div id="div">
<div id="nav">
<ul>
<li onmouseover="change('musicli')">音乐</li>
<li onmouseover="change('booksli')">书籍</li>
</ul>
</div>
<div id="music">
<ul>
<li>音乐。。。。。。。。。。</li>
<li>音乐。。。。。。。。。。</li>
<li>音乐。。。。。。。。。。</li>
<li>音乐。。。。。。。。。。</li>
<li>音乐。。。。。。。。。。</li>
<li>音乐。。。。。。。。。。</li>
<li>音乐。。。。。。。。。。</li>
<li>音乐。。。。。。。。。。</li>
</ul>
</div>
<div id="books">
<ul>
<li>书籍。。。。。。。。。。</li>
<li>书籍。。。。。。。。。。</li>
<li>书籍。。。。。。。。。。</li>
<li>书籍。。。。。。。。。。</li>
<li>书籍。。。。。。。。。。</li>
<li>书籍。。。。。。。。。。</li>
<li>书籍。。。。。。。。。。</li>
<li>书籍。。。。。。。。。。</li>
</ul>
</div>
</div>
<script>
var music = document.getElementById("music");
var books = document.getElementById("books");
function change(obj){
if(obj == "musicli"){
music.style.visibility = "visible";
books.style.visibility = "hidden";
}else if(obj == "booksli"){
books.style.visibility = "visible";
music.style.visibility = "hidden";
}
}
</script>
</body>
</html>
点击书籍元素后,右边音乐元素对应内容隐藏,书籍内容显示,但其没有上移,因为visibility属性即使设置为none也会占据空间。