用Javascript实现分栏

用Javascript实现分栏。

 

这里用到一个innerHTML, 以前一直以为innerHTML是在指定的ID里插入内容

 

其实不然，他是替换。

 

JS代码如下：

 

 

 

<mce:script language="javascript" type="text/javascript"><!-- //栏目隐藏 function lanmuhidden() { document.getElementById("lanmu").style.display = "none"; //获取表格的TD的ID，并将他隐藏 document.getElementById("lanmuid").innerHTML = "<img src="images/jt2.jpg" mce_src="images/jt2.jpg" onclick='javascript:lanmushow();' />" //将图片改变，CLICK事件变为lanmushow() } //栏目显示 function lanmushow() { document.getElementById("lanmu").style.display = ""; //获取表格的TD的ID，并将他显示 document.getElementById("lanmuid").innerHTML = "<img src="images/jt1.jpg" mce_src="images/jt1.jpg" onclick='javascript:lanmuhidden();' />" //将图片改变，CLICK事件变为lanmuhidden() } // --></mce:script>

 

 

HTML代码如下：

<table width="557" height="397" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"> <tr> <td id="lanmu" width="125"> <!--给表格的TD定一个ID--> <div align="center"> <p>栏目一</p> <p>栏目二</p> <p>栏目三</p> <p>栏目四</p> <p>栏目五</p> </div></td> <td width="30"><div align="center"> <span id="lanmuid"><img src="images/jt1.jpg" mce_src="images/jt1.jpg" width="30" height="24" onclick="javascript:lanmuhidden();" /></span> </div> </td> <td width="394"><div align="center">内容区域</div></td> </tr> </table>