您的位置：首页 > 移动开发 > 微信开发

一个小程序——页面的隐藏与显示

2011-06-08 16:21 176 查看 



<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[code]<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>js分栏模式</title>

</head>

<body>

<formaction=""method="get"name="form1">

<tablewidth="300"border="1"id="table1"name="table"height="400px">

<thid="lanmu"width="70">

<p><ahref="#">栏目一</a></p>

<p><ahref="#">栏目二</a></p>

<p><ahref="#">栏目三</a></p>

<p><ahref="#">栏目四</a></p>

</th>

<thid="xy"width="5"><imgsrc="haha.jpg"width="11"height="37"onclick="javascript:hide()"/></th>

<th>这里是内容区域</th>

</table>

</form>

</body>

</html>

<scriptlanguage="javascript"type="text/javascript">

//隐藏栏目

functionhide()

{

//将id为lanmu的样式的display属性设置为none，即隐藏起来

document.getElementById("lanmu").style.display="none";

//将id为lanmu的html语句换为下面的这句,点击出发的事件为显示

document.getElementById("xy").innerHTML="<imgsrc='haha2.jpg'onclick='javascript:xs()'/>"

}

//显示栏目

functionxs()

{

//讲id为lanmu的样式的display属性设为空，即显示出来

document.getElementById("lanmu").style.display="";

//将id为lanmu的样式的html语句更换回去,点击触发的事件为隐藏

document.getElementById("xy").innerHTML="<imgsrc='haha.jpg'onclick='javascript:hide()'/>;"

}

</script>

[/code]

原始界面：





隐藏后界面：





还原后界面：




                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航