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

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

赞 (0)

相关推荐

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

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

  • Android 使用SwipeRefreshLayout控件仿抖音做的视频下拉刷新效果

    SwipeRefreshLayout(这个控件),我先跟大家介绍一下这个控件: 一.SwipeRefreshLayout简单介绍 •先看以下官方文档,已有了很详细的描述了. 官方文档说明 •这里我再大概解释一下: •在竖直滑动时想要刷新页面可以用SwipeRefreshLayout来实现.它通过设置OnRefreshListener来监听界面的滑动从而实现刷新.也可以通过一些方法来设置SwipeRefreshLayout是否可以刷新.如:setRefreshing(true),展开刷新动画. s

  • vue+element搭建后台小总结 el-dropdown下拉功能

    vue+element搭建后台小总结 el-dropdown下拉功能

    本文实例为大家分享了el-dropdown下拉功能的具体代码,供大家参考,具体内容如下 功能:点击el-dropdown 下拉 下拉的数据 从后台获取 遍历到界面上 且多个el-dropdown下拉 共用 一个 @command 事件  @command="handleCommand" 上代码部分  html //全部城市 下拉 //handleCommand下拉事件 all_city点击后显示在上面的数据 item.label下拉的数据 :command点击传的值 用flag来区分同

  • 详解SpringBoot项目整合Vue做一个完整的用户注册功能

    目录 前言 1 实现用户注册流程 1.1 用户注册完整流程 1.2 用户注册信息及校验 2 后台接口设计 2.1 上传头像接口 2.2 用户注册接口 3 后端代码实现 3.1 用户头像上传接口编码实现 3.2 用户注册接口 4 前端代码实现 4.1 完成用户注册界面vue组件编码 4.2 工具类中增加校验方法 4.3 API文件中添加用户注册方法 4.4 全局方法中添加用户注册方法 4.5 路由列表中添加用户注册组件 4.6 登录组件中添加用户注册的跳转链接 4.7 路由跳转控制中添加白名单 5

  • 一个日期下拉菜单的js实现代码

    一个日期下拉菜单的js实现代码

    1.先看效果图: 2.js代码 year_month_day.js 复制代码 代码如下: year_month_day.js function DateSelector(selYear, selMonth, selDay) { this.selYear = selYear; this.selMonth = selMonth; this.selDay = selDay; this.selYear.Group = this; this.selMonth.Group = this; // 给年份.月份

  • Android实现美团下拉功能

    Android实现美团下拉功能

    本文实例为大家分享了Android实现美团下拉功能的具体代码,供大家参考,具体内容如下 效果图 实现 布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" a

  • flutter实现一个列表下拉抽屉的示例代码

    flutter实现一个列表下拉抽屉的示例代码

    目录 使用 源码 使用 通过监听滚动事件实现DragOpenDrawer 组件,可以给滚动组件添加一个下拉抽屉.其使用方式如下: DragOpenDrawer(   openDuration: Duration(microseconds: 900),   closeDuration: Duration(milliseconds: 300),   onOpen: (){     print("onOpen");   },  child: Column(       children: [

  • javascript实现的一个带下拉框功能的文本框

    有时我们需要一个可选的下拉框来选取内容,但是但是又有可以自定义输入的需求.对于这种需求,大部分网站使用的都是一个下拉框和一个 input text ,并列或分行给出选择.那么,我们希望它看上去像一个可以输入也可以选择的下拉框,那该如何做呢? 其实我们可以通过 css position 定位及少许的 javascript 代码,模拟出来这种效果. 复制代码 代码如下: <!DOCTYPE html><html><head> <title>可编辑可选择的下拉框&

  • Android RecyclerView上拉加载和下拉刷新（基础版）

    这里讲述的是用谷歌原生的SwipeRefreshLayout,进行刷新,以及利用RecycleView的滚动事件,判断是否到最后一个item,进行加载更多,这里加载更多是在RecycleView的适配器中使用不同item进行完成的. 这是activity的xml布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a

  • 省市区三级联动下拉框菜单javascript版

    实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat

随机推荐