程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> 做一個有下拉功能的留言版

做一個有下拉功能的留言版

編輯:關於PHP編程

留言版裡有太長的留言的話會把頁面撐的很長的,大家對那些很長的留言版是不是覺得看的不舒服,每次都要點很多次滾動條。
如果每次一開始只出現標題,點擊標題就會在下方出現內容(注意不是彈出窗口),這樣的話是不是很不錯呢!
接下來我們就看看如何實現:
首先要對各個標題和內容設上ID,這是第一個留言的ID設置,我們把標題的ID設為td1,內容為tdd1,接下去相同。
<TR align=left id=td1 onclick=goit(tdd1) onmouseout=noit(td1) onmouseover=onit(td1) style="CURSOR: hand" bgcolor=#C8E7BA>    
  <td vAlign=middle >這裡是標題</TD>

</TR>
<TR>
  <TD class=zw id=tdd1 bgcolor=#fffoce>這裡是內容
  <DIV align=right>
<A class=btn href="#tob0" onclick=goit(tdd1)>關閉</A>
  </DIV>
  </TD>
</TR>

"onclick=goit(tdd1) onmouseout=noit(td1) onmouseover=onit(td1)"
這三句就是mouse的事件,noit()和onit()只是改變顏色,goit()就是打開或關閉內容的函數,具體函數在下:

<SCRIPT language="JavaScript">
<!--
function onit(o){o.runtimeStyle.backgroundColor='#FFBB66'}
function noit(o){o.runtimeStyle.backgroundColor='#C8E7BA'}
function goit(o){
if (o.style.display=='none') {
o.style.display=''
}
else {
o.style.display='none'
}
}
-->
</SCRIPT>

最後不要忘了,初始化你的頁面,就是把內容先隱藏起來“
<script language="JavaScript">
goit(tdd1);goit(tdd2);…………
</script>

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved