javascript 控制frameset左边显示与隐藏

<frameset cols="115,12,*" rows="*" frameborder="no" framespacing="0" name="pageframe">
   <frame src="menu_left.asp" scrolling="auto" noresize="noresize" name="pageleft" />
   <frame src="frameline.html" scrolling="no" noresize="noresize" name="pageline" />
   <frame src="main.html" name="mainFrame" />
</frameset>

页面布局为左边菜单页，中间有个12象素宽度的条形页（用于点击后显示隐藏左边的菜单页），右边则是主体页面了。

第2个文件：frameline.html

这个文件中设置了用JAVASCRIPT脚本显示隐藏左边菜单页FRAME框架的代码。

<script type="text/javascript">
function ShowHideLeft(objtd){
if (parent.pageframe.cols=="115,12,*"){
   parent.pageframe.cols="0,12,*";
   objtd.innerHTML = '&gt;';
}
else{
   parent.pageframe.cols="115,12,*";
   objtd.innerHTML = '&lt;';
}
}
</script>

<table border="0" cellpadding="0" cellpadding="0" height="100%">
<tr>
<td valign="middle" title="显示隐藏左菜单" onMouseOver="" onClick="ShowHideLeft(this);">&lt;</td>
</tr>
</table>

这样，当在中间的条形框架页frameline.html上点击时，就能实现显示或隐藏左边的菜单功能了。

 

 

 

 

 

   
   

    
    <
    
    frameset 
    
    rows
    
    ="71,*"
    
     id
    
    ="FramesetControl"
    
     runat
    
    ="server"
    
    >
    
    
      
    
    <
    
    frame 
    
    src
    
    ="Head.html"
    
     scrolling
    
    ="no"
    
     name
    
    ="Head"
    
     id
    
    ="Head"
    
     noresize
    
    ="0"
    
    />
    
    
      
    
    <
    
    frameset id="menu" 
    
    cols
    
    ="152,*"
    
    >
    
    
              
    
    <
    
    frame 
    
    src
    
    ="Menu.html"
    
     name
    
    ="menu"
    
     id
    
    ="menu"
    
    />
    
    
              
    
    <
    
    frame 
    
    src
    
    ="Content.html"
    
     name
    
    ="Content"
    
     id
    
    ="Content"
    
    />
    
    
      
    
    </
    
    frameset
    
    >
    
    

    
    </
    
    frameset
    
    >
   
   

在head这个frame的head.html中有个button,
点击button的时候控制menu这个frame的隐藏,再次点击显示,如此反复.

function switchSysBar(){
 if (parent.document.getElementById('menu').cols=="152,*")
 {
 parent.document.getElementById('menu').cols="0,*";
 }
 else{
 parent.document.getElementById('menu').cols="152,*";
 }
}