html框架折叠的javascript实现

最新推荐文章于 2021-06-03 12:39:13 发布
最新推荐文章于 2021-06-03 12:39:13 发布
阅读量985 收藏
点赞数
文章标签： javascript html 框架 border function table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/faithsmile/article/details/1835607
版权

我有两个htm文件,下面是Main.htm的源码:

<html>
  <head>
    <title>主框架</title>
    <meta http-equiv=content-type content="text/html;charset=gb2312">   
  </head>
  <frameset border="0" framespacing="0" rows="51,*,0,0" frameBorder="0">
    <frame id="daoHangTiao" name="daoHangTiao" src="daoHangTiao.htm" frameBorder="0" noResize scrolling="no">
    <frameset border="0" name="main" frameSpacing="1" frameBorder="0" cols="503,*" scrolling="auto">
      <frame id="leftFrame" border="0" name="leftFrame" marginWidth="0" frameSpacing="0" marginHeight="0" src="leftFrame.htm" frameBorder="0" scrolling="no">
      <frame id="right" border="0" name="right" frameSpacing="0" src="rightIndex.htm" frameBorder="0">
    </frameset>
    <frame border="0" name="online" frameSpacing="0" src="online.htm" frameBorder="0" noResize scrolling="no">
    <frame border="0" name="function" frameSpacing="0" src="function.htm" frameBorder="0" noResize scrolling="no">
  </frameset>
</html>

以下是 leftFrame.htm 的源码:

<html>
  <head>
    <title>leftFrame</title>
    <script language=javascript>
      function changeWin(){
        if(parent.main.cols!='0,*' && parent.main.cols!='5,*'){
          parent.main.cols='5,*';
          ImgArrow.src="bl_1.gif";
        }else{
          parent.main.cols='503,*';
          ImgArrow.src="al_1.gif";
        }
      }
    </script>
    <meta http-equiv=content-type content="text/html;charset=gb2312">
  </head>

  <body bgColor="#8d989a" leftMargin="0" topMargin="0">
    <table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
      <tbody>
      <tr>
        <td width="100%">
          <iframe id="leftiframe" style="VISIBILITY:inherit;WIDTH:100%;HEIGHT:100%" name="leftiframe" src="leftMain.htm" frameBorder="0">
          </iframe>
        </td>
        <td bgColor="#d0d0c8">
          <table id="td1" height="100%" cellSpacing="0" cellPadding="0" width="100%" bgColor="#d7d8da border="0">
            <tbody>
              <tr>
                <td title="拖动以调整宽度" height="50%">
                </td>
              </tr>
              <tr>
                <td height="96">
                  <img id=ImgArrow οnclick=changeWin() alt="展开/关闭帖子列表" src="al_1.gif" width="5" border="0" name="ImgArrow" style="currsor:hand">
                </td>
              </tr>
              <tr>
                <td title="拖动以调整宽度" height="50%">
                </td>
              </tr>
             </tbody>
           </table>
         </td>
      </tr>
      </tbody>
    </table>
  </body>
</html>

另外,我还有两个gif图片(就是一个向右的三角箭头与向左的三角箭头,也可以自己PS两个),下载地址如下:

http://txt.mop.com/dzh/centerframe/al_1.gif

http://txt.mop.com/dzh/centerframe/bl_1.gif

将上面四个文件放在同一目录下,即可正常运行Main.htm查看出框架折叠的效果!

faithsmile
关注
Javascript实现代码折叠功能
10-21
总结一下，JavaScript实现代码折叠功能的关键在于创建一个能够识别和操作相应元素的函数，以及在HTML中正确地设置触发该函数的事件和结构。通过这种方式，我们可以使代码更加整洁，便于阅读和管理。当然，实际项目中...
html导航折叠与展开,css+js实现的折叠展开的菜单
weixin_32009069的博客
05-30 1064
css+js实现的折叠展开的菜单_网页代码站(www.webdm.cn).menutitle{cursor:pointer;margin-bottom: 5px;background-color:#ECECFF;color:#000000;width:140px;padding:2px;text-align:center;font-weight:bold;/*/*/border:1px solid...
js实现HTML页面折叠与展开
热门推荐
惊堂木
10-15 2万+
 下面两行js代码可以十分简洁的实现HTML页面中的折叠与展开！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">HTML> HEAD>  TITLE> New Document TITLE>  META NAME="Generator" CONTENT="EditPlus">  META NAME="Author"
html+js折叠菜单代码,原生js折叠菜单栏
weixin_35712223的博客
06-03 762
#menu {background-color: #f5f5f5;}.sub-menu,.menu-item {line-height: 30px;text-indent: 10px;}.sub-menu {padding-top: 30px;position: relative;transition: all 0.3s;padding-left: 15px;overflow-y: hidden;...
js 折叠详情 效果
fareast_mzh的博客
11-10 382
<!-- <table> <tr><th>时间</th><th>消息</th></tr> <volist name="invest" id="i"> <tr><td>{$i['time']}</td><td>{$i....
asp.net frameset 框架页面伸缩功能实现
分享经验，共同进步.
07-05 7934
1、新建Left.aspx、Right.aspx和Top.aspx页面 2、新建一个index.html页面，使用框架页包含以上3个aspx页面 3、各个页面代码如下 Top.aspx页面 头部页面 <img id="pic" height="12" alt="显示/隐藏" hspace=
html左右侧框架源码
08-20
在"html左右侧框架源码"中，左侧菜单通常使用`<ul>`和`<li>`元素构建一个层次结构，可能结合JavaScript或jQuery实现动态展开与折叠的效果，以便于展现树形架构。为了实现交互性，开发者可能会使用事件监听（如`click...
HTML 折叠框架 iframe
11-23
以下是一个基本的HTML和JavaScript实现折叠iframe的例子： ```html <!DOCTYPE html> <html> #collapsible-iframe { display: none; /* 初始状态为隐藏 */ } ...
HTML jquery实现左侧菜单折叠
01-17
然后，我们可以使用jQuery来编写JavaScript代码，实现菜单的折叠功能。首先，我们需要为菜单项添加一个点击事件监听器，并通过CSS类来控制子菜单的显示和隐藏。例如，我们可以添加一个`.collapsed`类，当该类存在时...
ace html框架
01-25
Ace HTML框架是一个强大的开源代码编辑器，主要用于构建和维护网页及Web应用中的代码编辑功能。Ace，全称为“Ajax.org Cloud9 Editor”，最初是Cloud9 IDE的一部分，现在已经成为一个独立的项目，被广泛用于各种在线...
网页左侧栏JS折叠菜单.rar
07-10
网页左侧栏JS折叠菜单，可伸缩展开菜单项目，Windows XP menus，菜单前带图标，国外菜单设计作品，带动态渐变效果，示例效果截图如上图所示，兼容火狐/IE8 /Chrome等浏览器。
HTML5折叠卡片式下拉菜单代码
10-25
HTML5折叠卡片式下拉菜单代码
菜单折叠的实现
******ASP.net探究******
12-06 1959
Untitled Documentvar w=200;function closenavi() {w-=10;if (w>-10) {window.parent.testframeset.cols = +w+,*;repeat=setTimeout("closenavi()",10);}else {clearTimeout(repeat);w=200;}} function ini
关于iframe折叠式框架的问题
大学IT网
03-06 1053
左右两框架交界处点一下按钮就可让右边的内容覆盖左边的目录 方法1： left.htm 方法2： 框架页面内容 此网页使用了框架，但您的浏览器不支持框架。 左桢页面内容 press 方法3:right.htm openclose=true; left
面板折叠
十年之约
02-10 583
在做框架一个时候一般会将界面分成好几个部分，如头部、底部、左侧菜单，中间折叠，右侧主界面等<frameset rows="104,*,30" cols="*" frameborder="no" border="0" framespacing="0">@*顶部发104px，底部30px，中间部分自适应*@ <frame src="Home/Top.aspx" name="topFrame" scr
frameset自动收缩
beimuaihui的专栏
05-07 1922
主框架:(all.html) frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0">  frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame"
6行原生代码 超级简单实现 html折叠面板
fucaijin的博客
12-14 1万+
1.废话不多说，先上效果图： 2.用途一般是可折叠的列表(导航列表等)： 3.代码(直接复制到.txt保存改为.html即可)： <div id="title" style="width:150px;height:30px;background-color: #FFE08B;" onclick="onTileClick()">标题</div&...
parent.main.location --------------------框架网页中 获取 或控制 子窗口的相关属性
weixin_33979203的博客
09-26 238
这句话的意思是 ：当前窗口的 父窗口（一般会是主框架）下的main窗口的location（即地址栏的地址）；比如一个页面A是个frameset页面，框架页。该框架页有两个框架窗口组成。&lt;frameset rows="126,*" cols="*" framespacing="0" frameborder="no" border="0"&gt;  &lt;frame src=&qu
JS/JQUERY（4）——parent.main.location-框架页面中，获取或控制子窗口的相关属性
weixin_30920091的博客
04-05 180
当前窗口的 父窗口（一般会是主框架）下的main窗口的location（即地址栏的地址）； 比如一个页面A是个frameset页面，框架页。 该框架页有两个框架窗口组成。 <frameset rows="126,*" cols="*" framespacing="0" frameborder="no" border="0"> 　　<frame sr...
JavaScript实现常见问题解答折叠效果
由于给定的文件信息中缺少具体的HTML代码和JavaScript实现代码，这里只能提供一个大致的知识框架。实际开发中，还需要具体编写相关的CSS样式来确保按钮或可点击元素符合设计要求，以及确保JavaScript代码能够正确地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>