现在的位置: 网页制作教程＞ JS网页特效＞正文

点击加号（+）按钮展开减号（-）按钮收起的效果

发表于2016/11/26 ⁄ JS网页特效 ⁄ 0条评论 ⁄ 热度 16,227℃

常用于问答栏目的点击加号（+）按钮展开内容，加号变减号，点击减号（-）就收起内容的效果。

展开和收起

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>无标题文档</title>
  <SCRIPT>
  function show(c_Str,imgg)
  {if(document.all(c_Str).style.display=='none')
  {document.all(c_Str).style.display='block';
  document.all(imgg).src='http://www.webym.net/jiaocheng/upfile/jscontent/12493937251.gif'}
  else{document.all(c_Str).style.display='none';
  document.all(imgg).src='http://www.webym.net/jiaocheng/upfile/jscontent/12493937250.gif'}}
  </SCRIPT>
<SCRIPT language=JavaScript>
  
  </SCRIPT>
  <STYLE>
  A {
  COLOR: red
  }
  .bg {
  BORDER-RIGHT: #d0d0d0 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #d0d0d0 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #d0d0d0 1px solid; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #d0d0d0 1px solid; BACKGROUND-COLOR: infobackground
  }
  .arrow1 {
  FONT-SIZE: 12px; COLOR: white; FONT-FAMILY: webdings
  }
  .retxt {
  BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #000000 1px solid; COLOR: blue; PADDING-TOP: 2px; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #dddddd
  }
  .body {
  BACKGROUND-COLOR: white
  }
  </STYLE>
</HEAD>
  <BODY>
  <table width="96%" height="18" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
  <td> </td>
  </tr>
  <tr> 
  <td> <TABLE 
  style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px" 
  cellSpacing=1 cellPadding=0 width="100%" border=0>
  <TBODY>
  <TR> 
  <TD height=16 
  style="BORDER-RIGHT: #cccccc 0px solid; BORDER-TOP: #cccccc 0px solid; PADDING-LEFT: 4px; BORDER-LEFT: #cccccc 0px solid; CURSOR: hand; COLOR: #333333; BORDER-BOTTOM: #cccccc 0px solid; BACKGROUND-COLOR: #ffffff" 
  onclick='show("tip432","img432")'><IMG 
  id=img432 hspace=1 src="http://www.webym.net/jiaocheng/upfile/jscontent/12493937250.gif" align=absMiddle 
  border=0> 登陆的快捷方式 
  <TABLE cellSpacing=0 cellPadding=0 width=100% align=center border=0>
  <TBODY>
  <TR> 
  <TD width="20" 
  height=1 colSpan=2 background=images/bg-line.gif></TD>
  </TR>
  </TBODY>
  </TABLE></TD>
  </TR>
  <TR> 
  <TD id=tip432 
  style="PADDING-RIGHT: 1px; DISPLAY: none; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" 
  width="100%"> <DIV 
  style="BORDER-RIGHT: #808080 0px solid; PADDING-RIGHT: 4px; BORDER-TOP: #808080 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: #808080 0px solid; LINE-HEIGHT: 150%; PADDING-TOP: 4px; BORDER-BOTTOM: #808080 0px solid; BACKGROUND-COLOR: #f7f7ef">用Win2000高级服务器版做服务器，即使打开了guest用户</DIV></TD>
  </TR>
  <TR> 
  <TD height=16 
  style="BORDER-RIGHT: #cccccc 0px solid; BORDER-TOP: #cccccc 0px solid; PADDING-LEFT: 4px; BORDER-LEFT: #cccccc 0px solid; CURSOR: hand; COLOR: #333333; BORDER-BOTTOM: #cccccc 0px solid; BACKGROUND-COLOR: #ffffff" 
  onclick='show("tip331","img331")'><IMG 
  id=img331 hspace=1 src="http://www.webym.net/jiaocheng/upfile/jscontent/12493937250.gif" align=absMiddle 
  border=0> 怎样在DOS下安装Win2000 
  <TABLE cellSpacing=0 cellPadding=0 width=100% align=center border=0>
  <TBODY>
  <TR> 
  <TD width="20" 
  height=1 colSpan=2 background=images/bg-line.gif></TD>
  </TR>
  </TBODY>
  </TABLE></TD>
  </TR>
  <TR> 
  <TD id=tip331 
  style="PADDING-RIGHT: 1px; DISPLAY: none; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" 
  width="100%"> <DIV 
  style="BORDER-RIGHT: #808080 0px solid; PADDING-RIGHT: 4px; BORDER-TOP: #808080 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: #808080 0px solid; LINE-HEIGHT: 150%; PADDING-TOP: 4px; BORDER-BOTTOM: #808080 0px solid; BACKGROUND-COLOR: #f7f7ef">1、有2种常用的安装方法：硬盘安装和光驱安装。我推荐硬盘安装方式，这样一来安装速度快，二来以后安装驱动的时候比</DIV></TD>
  </TR>
  <TR> 
  <TD height=16 
  style="BORDER-RIGHT: #cccccc 0px solid; BORDER-TOP: #cccccc 0px solid; PADDING-LEFT: 4px; BORDER-LEFT: #cccccc 0px solid; CURSOR: hand; COLOR: #333333; BORDER-BOTTOM: #cccccc 0px solid; BACKGROUND-COLOR: #ffffff" 
  onclick='show("tip247","img247")'><IMG 
  id=img247 hspace=1 src="http://www.webym.net/jiaocheng/upfile/jscontent/12493937250.gif" align=absMiddle 
  border=0> 硬盘容量比说明要小。 
  <TABLE cellSpacing=0 cellPadding=0 width=100% align=center border=0>
  <TBODY>
  <TR> 
  <TD width="20" 
  height=1 colSpan=2 background=images/bg-line.gif></TD>
  </TR>
  </TBODY>
  </TABLE></TD>
  </TR>
  <TR> 
  <TD id=tip247 
  style="PADDING-RIGHT: 1px; DISPLAY: none; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" 
  width="100%"> <DIV 
  style="BORDER-RIGHT: #808080 0px solid; PADDING-RIGHT: 4px; BORDER-TOP: #808080 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: #808080 0px solid; LINE-HEIGHT: 150%; PADDING-TOP: 4px; BORDER-BOTTOM: #808080 0px solid; BACKGROUND-COLOR: #f7f7ef">因为硬盘厂商计算容量的方法与操作系统的算法不同，厂家的K、M、G按乘1000的方式进位，而系统则是</DIV></TD>
  </TR>
  <TR> 
  <TD height=16 
  style="BORDER-RIGHT: #cccccc 0px solid; BORDER-TOP: #cccccc 0px solid; PADDING-LEFT: 4px; BORDER-LEFT: #cccccc 0px solid; CURSOR: hand; COLOR: #333333; BORDER-BOTTOM: #cccccc 0px solid; BACKGROUND-COLOR: #ffffff" 
  onclick='show("tip166","img166")'><IMG 
  id=img166 hspace=1 src="http://www.webym.net/jiaocheng/upfile/jscontent/12493937250.gif" align=absMiddle 
  border=0> Mfm1992是病毒文件吗 
  <TABLE cellSpacing=0 cellPadding=0 width=100% align=center border=0>
  <TBODY>
  <TR> 
  <TD width="20" 
  height=1 colSpan=2 background=images/bg-line.gif></TD>
  </TR>
  </TBODY>
  </TABLE></TD>
  </TR>
  <TR> 
  <TD id=tip166 
  style="PADDING-RIGHT: 1px; DISPLAY: none; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" 
  width="100%"> <DIV 
  style="BORDER-RIGHT: #808080 0px solid; PADDING-RIGHT: 4px; BORDER-TOP: #808080 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: #808080 0px solid; LINE-HEIGHT: 150%; PADDING-TOP: 4px; BORDER-BOTTOM: #808080 0px solid; BACKGROUND-COLOR: #f7f7ef">Mfm1992是由于智能ABC的词库出错而产生的一个文件。由于智能ABC输入法的词库容量有限，</DIV></TD>
  </TR>
  <TR> 
  <TD height=16 
  style="BORDER-RIGHT: #cccccc 0px solid; BORDER-TOP: #cccccc 0px solid; PADDING-LEFT: 4px; BORDER-LEFT: #cccccc 0px solid; CURSOR: hand; COLOR: #333333; BORDER-BOTTOM: #cccccc 0px solid; BACKGROUND-COLOR: #ffffff" 
  onclick='show("tip158","img158")'><IMG 
  id=img158 hspace=1 src="http://www.webym.net/jiaocheng/upfile/jscontent/12493937250.gif" align=absMiddle 
  border=0> IE无法在新窗口打开链接 
  <TABLE cellSpacing=0 cellPadding=0 width=100% align=center border=0>
  <TBODY>
  <TR> 
  <TD width="20" 
  height=1 colSpan=2 background=images/bg-line.gif></TD>
  </TR>
  </TBODY>
  </TABLE></TD>
  </TR>
  <TR> 
  <TD id=tip158 
  style="PADDING-RIGHT: 1px; DISPLAY: none; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" 
  width="100%"> <DIV 
  style="BORDER-RIGHT: #808080 0px solid; PADDING-RIGHT: 4px; BORDER-TOP: #808080 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: #808080 0px solid; LINE-HEIGHT: 150%; PADDING-TOP: 4px; BORDER-BOTTOM: #808080 0px solid; BACKGROUND-COLOR: #f7f7ef">关闭所有 
  IE 窗口. 点击开始，运行，输入以下命令: </DIV></TD>
  </TR>
  <TR> 
  <TD height=16 
  style="BORDER-RIGHT: #cccccc 0px solid; BORDER-TOP: #cccccc 0px solid; PADDING-LEFT: 4px; BORDER-LEFT: #cccccc 0px solid; CURSOR: hand; COLOR: #333333; BORDER-BOTTOM: #cccccc 0px solid; BACKGROUND-COLOR: #ffffff" 
  onclick='show("tip134","img134")'><IMG 
  id=img134 hspace=1 src="http://www.webym.net/jiaocheng/upfile/jscontent/12493937250.gif" align=absMiddle 
  border=0> Win2000中自动关闭停止响应的程序 
  <TABLE cellSpacing=0 cellPadding=0 width=100% align=center border=0>
  <TBODY>
  <TR> 
  <TD width="20" 
  height=1 colSpan=2 background=images/bg-line.gif></TD>
  </TR>
  </TBODY>
  </TABLE></TD>
  </TR>
  <TR> 
  <TD id=tip134 
  style="PADDING-RIGHT: 1px; DISPLAY: none; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" 
  width="100%"> <DIV 
  style="BORDER-RIGHT: #808080 0px solid; PADDING-RIGHT: 4px; BORDER-TOP: #808080 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: #808080 0px solid; LINE-HEIGHT: 150%; PADDING-TOP: 4px; BORDER-BOTTOM: #808080 0px solid; BACKGROUND-COLOR: #f7f7ef">在Windows 
  2000操作系统中，可以设置系统自动关闭停止响应的程序，只要你点桌面上</DIV></TD>
  </TR>
  <TR> 
  <TD height=16 
  style="BORDER-RIGHT: #cccccc 0px solid; BORDER-TOP: #cccccc 0px solid; PADDING-LEFT: 4px; BORDER-LEFT: #cccccc 0px solid; CURSOR: hand; COLOR: #333333; BORDER-BOTTOM: #cccccc 0px solid; BACKGROUND-COLOR: #ffffff" 
  onclick='show("tip132","img132")'><IMG 
  id=img132 hspace=1 src="http://www.webym.net/jiaocheng/upfile/jscontent/12493937250.gif" align=absMiddle 
  border=0> 更快的在运行中输入 
  <TABLE cellSpacing=0 cellPadding=0 width=100% align=center border=0>
  <TBODY>
  <TR> 
  <TD width="20" 
  height=1 colSpan=2 background=images/bg-line.gif></TD>
  </TR>
  </TBODY>
  </TABLE></TD>
  </TR>
  <TR> 
  <TD id=tip132 
  style="PADDING-RIGHT: 1px; DISPLAY: none; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" 
  width="100%"> <DIV 
  style="BORDER-RIGHT: #808080 0px solid; PADDING-RIGHT: 4px; BORDER-TOP: #808080 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: #808080 0px solid; LINE-HEIGHT: 150%; PADDING-TOP: 4px; BORDER-BOTTOM: #808080 0px solid; BACKGROUND-COLOR: #f7f7ef">您常在运行中输入Regedit或Msconfig吗？是不是说觉得输入的字符太多了？你可把Regedi</DIV></TD>
  </TR>
  <TR> 
  <TD height=16 
  style="BORDER-RIGHT: #cccccc 0px solid; BORDER-TOP: #cccccc 0px solid; PADDING-LEFT: 4px; BORDER-LEFT: #cccccc 0px solid; CURSOR: hand; COLOR: #333333; BORDER-BOTTOM: #cccccc 0px solid; BACKGROUND-COLOR: #ffffff" 
  onclick='show("tip114","img114")'><IMG 
  id=img114 hspace=1 src="http://www.webym.net/jiaocheng/upfile/jscontent/12493937250.gif" align=absMiddle 
  border=0> XP:pagefile.sys和hiberfil.sys 
  <TABLE cellSpacing=0 cellPadding=0 width=100% align=center border=0>
  <TBODY>
  <TR> 
  <TD width="20" 
  height=1 colSpan=2 background=images/bg-line.gif></TD>
  </TR>
  </TBODY>
  </TABLE></TD>
  </TR>
  <TR> 
  <TD id=tip114 
  style="PADDING-RIGHT: 1px; DISPLAY: none; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" 
  width="100%"> <DIV 
  style="BORDER-RIGHT: #808080 0px solid; PADDING-RIGHT: 4px; BORDER-TOP: #808080 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: #808080 0px solid; LINE-HEIGHT: 150%; PADDING-TOP: 4px; BORDER-BOTTOM: #808080 0px solid; BACKGROUND-COLOR: #f7f7ef">这两个文件一个是分页文件，一个是保存休眠时数据的文件，并且他们是默认隐藏的，</DIV></TD>
  </TR>
  <TR> 
  <TD height=16 
  style="BORDER-RIGHT: #cccccc 0px solid; BORDER-TOP: #cccccc 0px solid; PADDING-LEFT: 4px; BORDER-LEFT: #cccccc 0px solid; CURSOR: hand; COLOR: #333333; BORDER-BOTTOM: #cccccc 0px solid; BACKGROUND-COLOR: #ffffff" 
  onclick='show("tip113","img113")'><IMG 
  id=img113 hspace=1 src="http://www.webym.net/jiaocheng/upfile/jscontent/12493937250.gif" align=absMiddle 
  border=0> 网有卖 
  <TABLE cellSpacing=0 cellPadding=0 width=100% align=center border=0>
  <TBODY>
  <TR> 
  <TD width="20" 
  height=1 colSpan=2 background=images/bg-line.gif></TD>
  </TR>
  </TBODY>
  </TABLE></TD>
  </TR>
  <TR> 
  <TD id=tip113 
  style="PADDING-RIGHT: 1px; DISPLAY: none; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px" 
  width="100%"> <DIV 
  style="BORDER-RIGHT: #808080 0px solid; PADDING-RIGHT: 4px; BORDER-TOP: #808080 0px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; BORDER-LEFT: #808080 0px solid; LINE-HEIGHT: 150%; PADDING-TOP: 4px; BORDER-BOTTOM: #808080 0px solid; BACKGROUND-COLOR: #f7f7ef">网站源码下载与网站制作教程分享中心！www.webym.net<BR>
  </DIV></TD>
  </TR>
  </TBODY>
  </TABLE></td>
  </tr>
  </table>
  <p>查找更多代码，请访问：<a href="http://www.webym.net/jiaocheng/" target="_blank">网站制作教程</a></p>
  </BODY></HTML>

运行代码提示：您可以先修改部分代码再运行。

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/263.html