利用CSS+JavaScript製作Show/Hide Div效果,當按滑鼠時,即可顯示或隱藏內容,可以利用此作法縮減網頁空間。

 

◎在頁面加入JavaScript

<script type="text/javascript" language="JavaScript">把下面這段貼在這裡</script>


function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}

 

◎加入CSS樣式

<div id="uniquename" style="display:none;">
<p>要隱藏/顯示的內容放在這裡</p>
</div>

 

◎在Div中加入JavaScript,下列共有三種隱藏/顯示的方式,可依據需求選擇不同的顯示方式。

 

<a href="javascript:ShowContent('uniquename')">
點擊此顯示內容
</a>

 

<a href="javascript:HideContent('uniquename')">
點擊此隱藏內容
</a>

 

<a href="javascript:ReverseDisplay('uniquename')">
點擊此顯示/隱藏內容
</a>

 

參考出處:

http://www.willmaster.com/blog/css/show-hide-div-layer.php

    全站熱搜

    jon6773 發表在 痞客邦 留言(1) 人氣()