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

留言版里有太长的留言的话会把页面撑的很长的,大家对那些很长的留言版是不是觉得看的不舒服,每次都要点很多次滚动条。
如果每次一开始只出现标题,点击标题就会在下方出现内容(注意不是弹出窗口),这样的话是不是很不错呢!
接下来我们就看看如何实现:
首先要对各个标题和内容设上ID,这是第一个留言的ID设置,我们把标题的ID设为td1,内容为tdd1,接下去相同。

1<tr align="left" bgcolor="#C8E7BA" id="td1" onclick="goit(tdd1)" onmouseout="noit(td1)" onmouseover="onit(td1)" style="CURSOR: hand">
2<td valign="middle">这里是标题</td>
3</tr>
1<tr>
2<td bgcolor="#fffoce" class="zw" id="tdd1">这里是内容   
3<div align="right">
4<a class="btn" href="#tob0" onclick="goit(tdd1)">关闭</a>
5</div>
6</td>
7</tr>

"onclick=goit(tdd1) onmouseout=noit(td1) onmouseover=onit(td1)"
这三句就是mouse的事件,noit()和onit()只是改变颜色,goit()就是打开或关闭内容的函数,具体函数在下:

 1<script language="JavaScript">   
 2<!--   
 3function onit(o){o.runtimeStyle.backgroundColor='#FFBB66'}   
 4function noit(o){o.runtimeStyle.backgroundColor='#C8E7BA'}   
 5function goit(o){   
 6if (o.style.display=='none') {   
 7o.style.display=''   
 8}   
 9else {   
10o.style.display='none'   
11}   
12}   
13\-->   
14</script>

最后不要忘了,初始化你的页面,就是把内容先隐藏起来“

1<script language="JavaScript">   
2goit(tdd1);goit(tdd2);…………   
3</script>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus