您的位置: 首页  >  文章  >  javascript完成分栏显示的例子

javascript完成分栏显示的例子

分类: 文章 • 2023-03-15 00:14:41

这是学习视频时做的例子，感觉不错就保存一下，下面是效果图：

javascript完成分栏显示的例子javascript完成分栏显示的例子

下面是例子的源码：

<!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=utf-8" /> <title>分栏模式</title> <script language="javascript" type="text/javascript"> function yc() { document.getElementById("lanmu").style.display="none"; //document.getElementById("img").src="picture/tupian2.png" document.getElementById("img").innerHTML = "<img src='picture/tupian2.png' width='11' height='47' alt='显示按钮' onclick='xs();'>"; } function xs() { document.getElementById("lanmu").style.display=""; document.getElementById("img").innerHTML="<img src='picture/tupian1.png' width='11' height='47' alt='缩进按钮' onclick='yc();'/>" } </script> </head> <body> <table width="500" height="400" border="1"> <tr> <td id="lanmu" width="96" 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></td> <td width="8"> <span id="img"><img src="picture/tupian1.png" width="11" height="47" alt="缩进按钮" onclick="yc();"/></span> </td> <td width="374" align="center">这里是内容区域！！！</td> </tr> </table> </body> </html>

相关推荐