CSS實現DIV的切換

CSS是一種非常強大的元素樣式設置語言。通過CSS我們可以控制頁面上的元素的絕大多數的樣式和交互行為。其中一項非常有用的功能就是實現DIV的切換。在本文中我們將詳細講解如何使用CSS實現DIV的切換。

步驟一：準備HTML代碼

<div id="content1">
<h2>這是第一個DIV的內容</h2>
<p>一些文本內容……</p>
</div>
<div id="content2" style="display:none;">
<h2>這是第二個DIV的內容</h2>
<p>一些文本內容……</p>
</div>

步驟二：添加CSS樣式

#content1{
display:block;
}
#content2{
display:none;
}

步驟三：添加JavaScript代碼

function showContent(id){
var content1 = document.getElementById("content1");
var content2 = document.getElementById("content2");
if(id == 1){
content1.style.display = "block";
content2.style.display = "none";
}
else{
content1.style.display = "none";
content2.style.display = "block";
}
}

步驟四：頁面上添加切換按鈕

<input type="button" value="切換到第一個DIV" onclick="showContent(1);"/>
<input type="button" value="切換到第二個DIV" onclick="showContent(2);"/>

通過以上簡單的步驟就可以實現DIV的切換。具體的實現方法可通過上述代碼聯想到，找到元素對象后更改其CSS樣式就可以了。通過JavaScript的if語句實現DIV的切換。

CSS實現DIV的切換，for your reference。