页面实现折叠效果

最新推荐文章于 2023-12-14 15:39:06 发布

benben5211314

最新推荐文章于 2023-12-14 15:39:06 发布

阅读量485

点赞数

分类专栏： js，html页面

本文链接：https://blog.csdn.net/benben5211314/article/details/84661597

版权

js，html页面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在一些系统中，我们经常看到页面的折叠，打开效果。其实原理是一样的，图片添加点击事件，

<table>

      <tr class=common>
        <td class=common>
          <IMG  src= "../common/images/butExpand.gif" style= "cursor:hand;"  
                OnClick= "showPage(this,div1);">
         </td> 
          <td class=titleImg>
            基本信息
          </td>   
      </tr> 
    </table>
   <Div  id= "div1" style= "display: ''">
          折叠区代码 
   </div>

其中style= "cursor:hand;" 这个是鼠标事件，就是鼠标经过时，指针的变化，这里是变成小手，其他的属性参考w3cschool 中的介绍。

function showPage(img,spanID)
{
	if(spanID.style.display=="")
	{
		//关闭
		spanID.style.display="none";
		img.src="../common/images/butCollapse.gif";
	}
	else
	{
		//打开
		spanID.style.display="";
		img.src="../common/images/butExpand.gif";
	}
}

附件是一个完整的示例。