javascript实现页面分栏

来源：互联网发布：网络教育培训加盟编辑：程序博客网时间：2024/06/06 01:49

具体代码如下：

<!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>javascript分栏模式</title><script language="javascript" type="text/javascript">function yc(){document.getElementById("lanmu").style.display="none";document.getElementById("pic").innerHTML="<img src='image/箭头右.png' onclick='xs();' />";}function xs(){document.getElementById("lanmu").style.display="";document.getElementById("pic").innerHTML="<img src='image/箭头左.png' onclick='yc();' />";}</script></head><body><table width="500" height="270" border="2">  <tr>    <td id="lanmu" align="center">         <p><a href="#">栏目一</a></p>    <p><a href="#">栏目二</a></p>    <p><a href="#">栏目三</a></p>    <p><a href="#">栏目四</a></p>    <p><a href="#">栏目五</a></p>    <p><a href="#">栏目六</a></p>    <p><a href="#">栏目七</a></p>    </td>    <td width="13"><span id="pic"><img src="image/箭头左.png" onclick="yc();" /></span>    </td>    <td width="364" align="center"> </td>  </tr></table></body></html>

0 0