<!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也會佔據空間。