`

左边菜单，右边内容

HTMLJavaScript框架 
阅读更多

主框架(main.html)左右两框

左边功能菜单（left.html）

右边内容（content*.html）

 

main.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>主页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>  
  <frameset id="frame1" rows="*" cols="265,*" framespacing="0" frameborder="yes" border="0">
    <frame src="left.html" name="leftFrame" scrolling="auto" noresize>
    <frame src="content1.html" name="mainFrame" scrolling="NO"  noresize>
  </frameset>
<noframes>
<body>
</body>
</noframes>
</html>

left.html


<html>
    <head>
        <title>左边操作菜单</title>
        <script type="text/javascript">...
            function show()...{
                var id = document.getElementById("info");
                var sub = document.getElementById("subInfo");
                if(sub.style.display == "none") ...{
                    sub.style.display="inline";                                            
                } else ...{
                    sub.style.display="none";                    
                }            
            }
        </script>
    </head>
    <body>
        <table border="0">
            <tr>
                <td>
                    <table border="0">
                        <tr><td id="info" style="cursor: hand" onClick="show()">信息维护</td></tr>
                    </table>
                    <div id="subInfo" style="display: none">
                        <table border="0">
                            <tr>
                                <td><a href="content1.html" target="mainFrame"> 修改资料</a></td>
                            </tr>
                            <tr>
                                <td><a href="content2.html" target="mainFrame"> 修改密码</a></td>
                            </tr>
                            <tr>
                                <td><a href="content3.html" target="mainFrame"> 添加子栏目</a></td>
                            </tr>
                        </table>
                    </div>
                </td>                
            </tr>
            <tr>
                <td>信息维护2</td>
            </tr>
            <tr>
                <td><a href="content2.html" target="mainFrame">功能菜单</a></td>
            </tr>
            <tr>
                <td><a href="content2.html" target="mainFrame">退出</a></td>
            </tr>
        </table>
    </body>
</html>

content*.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>  
<body>
<font size="12">内容1</font>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>  
<body>
<font size="12">内容2</font>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>  
<body>
<font size="12">内容3</font>
</body>
</html>

很朴素，以后再完善，若有更好的，请推荐

 

分享到：
| struts资源文件的中文解决方法，附带Struts ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Axure左边菜单，右边显示内容案例

    Axure8.0制作选择左边菜单栏，右边显示相关内容案例，相关详细图文操作，可以参考博客内容：http://blog.csdn.net/ffacffac/article/details/67639914

    HorizontalMenu(横向滑动ViewGroup+左边菜单右边内容)

    - 重写`onLayout()`方法来确定子视图的位置，确保左边的菜单和右边的内容可以正确地横向排列。 - 实现滑动手势检测，这通常涉及覆写`onTouchEvent()`，处理ACTION_DOWN、ACTION_MOVE和ACTION_UP等触摸事件，以便...

    基于Ajax+div的“左边菜单、右边内容”页面效果实现

    这样就使用Ajax+div实现了左边菜单选择，右边内容显示的效果，下面就来看看具体的实现过程吧 一： 整个演示用的示例程序包含默认页面（index.jsp），用户列表页（userList.jsp），产品列表页（productList.j

    左侧菜单栏控制右侧页面内容切换

    在这个场景中，我们关注的是一个基于"jQuery + Bootstrap"的示例项目，它实现了左侧菜单栏控制右侧页面内容切换的功能，并且结合了Bootstrap的弹框展示。下面我们将深入探讨这个项目的核心技术和实现细节。 首先，...

    C#Winform界面布局设计(左侧菜单)右侧窗口操作

    右侧窗口的操作，可能指的是在用户点击左侧菜单项时，动态加载和显示不同的内容。这通常通过控制Panel或TabControl的Visible属性，以及使用Controls集合的方法Add和Remove来实现。当用户选择不同的菜单项时，隐藏...

    iframe实现左侧菜单右侧页面简单示例

    "iframe实现左侧菜单右侧页面简单示例"就是一个典型的双栏布局模式，常用于展示左侧导航菜单，右侧则展示对应的内容区域。这种设计模式在很多网站和管理系统中都很常见。 Iframe，全称"Inline Frame"，是HTML中的一...

    Q753697 asp.net中点击左侧菜单，右侧显示相应内容

    在ASP.NET开发中，构建一个网站常常涉及到左侧菜单与右侧内容区域的交互设计。这个设计模式常见于各种管理后台或信息展示平台，用户通过点击左侧菜单来切换右侧显示的具体内容。"Q753697 asp.net中点击左侧菜单，...

    C#上位机与单片机的完美结合（内附有用户登录，注册，截图，温度采集，历史数据展示，左边菜单右边内容展示的主界面

    在这个项目中，界面可能包含登录和注册表单，以及主界面的菜单布局，如左侧菜单栏和右侧内容展示区域。 4. **数据可视化**：历史数据展示可能涉及到图表、曲线图等数据可视化工具，用于直观地呈现温度采集等传感器...

    左边菜单,右边内容

    "左边菜单,右边内容"这个标题暗示了一种常见的界面布局模式，即左侧通常展示导航菜单，右侧则显示具体内容。这种设计模式在很多应用中都能看到，如手机应用、网页甚至桌面软件。它提供了良好的导航结构，使用户能够...

    记录原生html+js实现左侧导航栏右侧内容页的实现

    在网页设计中，左侧导航栏和右侧内容页的布局是一种常见的网页结构，广泛应用于各种网站，如企业官网、博客、论坛等。这种布局能够清晰地将网站的主要功能和具体内容划分开来，提供良好的用户体验。本篇文章将深入...

    android右侧菜单

    android右侧菜单，项目中用到，自己修改而来，亲测有效。代码中注释详细，如需左侧导航的，可以参考本人资源“侧边导航栏”http://download.csdn.net/detail/zhyj9493352669/5108753

    ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容

    在***中实现点击左边页面链接时，右边iframe框架显示对应链接页面的内容，是一种常见的网页布局模式，经常被用于后台管理系统中。这种布局允许用户在一个窗口内操作导航，而在另一个子窗口内查看和处理内容，从而...

    iframe异步加载实现点击左边菜单加载右边内容实例讲解

    关于iframe异步加载，我们常用的大都是左边菜单栏右边是内容页面，要求我们不能左边菜单不能刷新的情况下，异步加载右边的内容页面。 话不多说，做了一个实例大致是这样的： 1、首先在你的项目中建立三个文件如： 2...

    左边按钮右边菜单

    - 在"左边按钮右边菜单"的例子中，Fragment可能被用来实现每个菜单项对应的不同内容视图。 4. **滚动（Scroll）**： - 在Android中，ScrollView或HorizontalScrollView可以用来实现内容的滚动效果，这在菜单项较...

    layui实现左侧菜单点击右侧内容区显示

    左侧菜单的点击事件触发了内容区的更新，这种模式在后台管理系统中非常常见，能够提高用户体验，减少页面刷新，使得操作更加流畅。为了实现这一功能，开发者需要理解layui的布局和组件机制，并熟练运用JavaScript...

    用Visual Studio 2017实现C# Winform 左侧菜单左边显示，子窗体显示在右边主窗体.rar

    在本文中，我们将深入探讨如何使用Visual Studio 2017来创建一个C# Windows Forms应用程序，该程序具有左侧的菜单栏以及右侧显示的子窗体。这是一个常见的UI设计模式，用于提供良好的用户交互体验。我们将关注以下几...

    div左边点击链接右边显示内容特效

    在网页设计中，"div左边点击链接右边显示内容特效"是一种常见的交互效果，它通过JavaScript实现，用于增强用户体验。这个效果通常应用于导航菜单、侧边栏或者任何需要动态展示内容的区域。下面将详细讲解这一特效的...

    android 左侧菜单 右侧内容

    在Android开发中，左侧菜单（通常称为滑动抽屉或Navigation Drawer）和右侧内容是常见的应用界面设计，这种布局方式可以有效地展示多个功能模块并提供良好的用户体验。Android的左侧菜单通常用于放置导航选项，而...

    visual c++ vc位图菜单,菜单左边有一列广告,右边是菜单项_极品

    "左边有一列广告,右边是菜单项" 暗示菜单结构包含两个部分：左侧可能显示推广内容或品牌形象的位图，而右侧则展示常规的菜单选项。 标签“位图菜单”，“vc”，“c++”表明我们将讨论如何在C++编程中利用Windows ...

Magicbox
Global site tag (gtag.js) - Google Analytics