HTML框架页面实现与交互-优快云博客

本文链接：https://blog.youkuaiyun.com/sws8327/article/details/1578260

这篇博客介绍了一个HTML页面如何创建框架布局，并实现点击切换左侧导航栏的功能。使用了iframe来构建不同区域，如顶部、左侧导航和主要内容区域。通过JavaScript进行交互控制，例如根据屏幕宽度隐藏或显示导航栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<style type="text/css">
    .navPoint {COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt}
</style>
<title>框架测试</title>
<script type="text/javascript">
    if(self!=top)
    {
        top.location=self.location;
    }
    function switchSysBar()
    {
        if (switchPoint.innerText==3)
        {
            switchPoint.innerText=4;
            document.all("frmTitle").style.display="none";
        }else
        {
            switchPoint.innerText=3;
            document.all("frmTitle").style.display="";
        }
    }
</script>
</head>
<body style="MARGIN: 0px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
        
        <iframe  frameborder="0" id="top"  name="top" scrolling="no" src="../inc/top.aspx"
            style="HEIGHT: 60px; VISIBILITY: inherit; WIDTH: 100%; Z-INDEX: 3"></iframe>
    </td>
  </tr>
</table>
<table border="0"  cellpadding="0" cellspacing="0" width="100%" style="height:100% ">
  <tr>
    <td align= "center"  id="frmTitle">
        
        <iframe   frameborder="0" id="carnoc" name="carnoc" scrolling="auto" src="Left.aspx"
            style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 200px; Z-INDEX: 2"></iframe>
    </td>
    <td style="WIDTH: 9pt"  class="division">
    
    <table border="0"  cellpadding="0" cellspacing="0" style="height:100%">
      <tr>
        <td bgcolor="#BB0000" style="HEIGHT: 100%" onclick="switchSysBar()">
        <font style="FONT-SIZE: 9pt; CURSOR: default; COLOR: #ffffff">
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <span class="navPoint" id="switchPoint" title="关闭/打开左栏">3</span>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        屏幕切换 </font></td>
      </tr>
    </table>
    </td>
    <td style="WIDTH: 100%">
    
    <iframe  frameborder="0" id="main" name="main" scrolling="yes" src="cxyd/zjyd.aspx"  style="HEIGHT:95%; VISIBILITY: inherit; WIDTH: 100%; Z-INDEX: 1"></iframe>    </td>
  </tr>
</table>
</body>
</html>
<script type="text/javascript">
if(window.screen.width<'1024'){switchSysBar()}
</script>

HTML活动框架代码