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


Posted in PHP onOctober 09, 2006

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

PHP 相关文章推荐
聊天室php&amp;mysql(二)
Oct 09 PHP
PHP 程序员也要学会使用“异常”
Jun 16 PHP
让PHP开发者事半功倍的十大技巧小结
Apr 20 PHP
基于Zookeeper的使用详解
May 02 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
Mar 16 PHP
PHP+jQuery+Ajax实现用户登录与退出
Apr 27 PHP
Zend Framework实现多服务器共享SESSION数据的方法
Mar 22 PHP
php自定义函数实现汉字转换utf8编码的方法
Sep 29 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
Oct 18 PHP
Zend Framework入门教程之Zend_Config组件用法详解
Dec 09 PHP
php app支付宝回调(异步通知)详解
Jul 25 PHP
PHP实现类似题库抽题效果
Aug 16 PHP
留言板翻页的实现详解
Oct 09 #PHP
聊天室php&amp;mysql(二)
Oct 09 #PHP
聊天室php&amp;mysql(一)
Oct 09 #PHP
建立文件交换功能的脚本(三)
Oct 09 #PHP
建立文件交换功能的脚本(一)
Oct 09 #PHP
建立文件交换功能的脚本(二)
Oct 09 #PHP
深入了解php4(2)--重访过去
Oct 09 #PHP
You might like
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
element-ui 本地化使用教程详解
2019/10/28 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
python中遍历文件的3个方法
2014/09/02 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python实现求数列和的方法示例
2018/01/12 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
Python中的全局变量如何理解
2020/06/04 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
庆元旦广播稿
2014/02/10 职场文书
汽修专业自荐信
2014/07/07 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书