`
落地窗
  • 浏览: 435255 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用javascript实现显示隐藏左侧菜单

阅读更多
javascript代码如下:
<script language="javascript" type="text/javascript">
    function HideShow()
    {
        var alt = document.getElementById('switchPoint').alt;
        var src = document.getElementById('switchPoint').src;
        if (alt == "隐藏") 
        {
            document.getElementById('switchPoint').alt = "显示";
            document.getElementById('switchPoint').src = src.substring(0, src.length - 8) + "show.jpg";
            document.all("leftFrame").style.display = "none";
        } 
        else 
        {
            document.getElementById('switchPoint').alt = "隐藏";
            document.getElementById('switchPoint').src = src.substring(0, src.length - 8) + "hide.jpg";
            document.all("leftFrame").style.display = "";
        }
    }
</script>




页面代码如下:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="height: 100%">
                <tr>
                    <td bgcolor="#0A5C8E" width="8px">
                        &nbsp;</td>
                    <td width="170px" valign="top" id="leftFrame">   
                        <uc2:left ID="left1" runat="server" />
                    </td>
                    <td bgcolor="#0A5C8E" width="10px">
                        <img src="images/hide.jpg" alt="隐藏" id="switchPoint" onclick="HideShow()" style="cursor:hand"/>
                    </td>
                    <td align="left" valign="top" height="620px">
                        <iframe id="rightFrame" name="main" frameborder="0" scrolling="yes"  src="main.aspx" height="100%" width="100%" ></iframe>
                        &nbsp;</td>
                    <td bgcolor="#0A5C8E" width="8px">
                        &nbsp;</td>
                </tr>
</table>


分享到:
评论

相关推荐

    以实验管理系统为例 实现了左侧菜单切换右侧内容等功能

    在本项目中,我们以一个实验管理系统的实例来探讨如何构建一个后台管理系统,重点在于实现左侧菜单与右侧内容的交互功能。这个系统采用了一系列前端技术,包括jQuery、HTML、CSS和Bootstrap,为开发者提供了一个快速...

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

    在左侧菜单和右侧内容的布局中,CSS可以帮助我们设置边距、填充、浮动、定位等,确保各元素在屏幕上的位置恰到好处,同时还能实现响应式设计,让页面在不同设备上都能良好显示。 此外,提到的"没有多余功能"意味着...

    javascript左侧悬浮二级菜单

    在本案例中,我们讨论的主题是“JavaScript左侧悬浮二级菜单”,这是一种常见的网页导航设计,能够提供用户友好的浏览体验。这样的菜单通常出现在网页的左侧,始终保持可见,即使用户滚动页面,菜单也会悬浮在屏幕的...

    jQuery简单实现仿京东商城的左侧菜单效果代码

    本文介绍了一段使用jQuery实现模仿京东商城左侧菜单效果的代码。通过分析给定文件的内容,我们将展开对以下几个知识点的讨论: 1. jQuery的基本概念 2. jQuery鼠标事件的使用 3. CSS样式控制与动态切换 4. HTML结构...

    防京东左侧菜单

    在实现防京东左侧菜单的过程中,开发者可能会使用到以下工具: 1. 浏览器开发者工具:这是前端开发必备的工具,可以用来查看和修改网页源代码,调试JavaScript,以及模拟不同设备和浏览器环境。 2. CSS预处理器:如...

    JavaScript实现左侧菜单效果

    在JavaScript实现左侧菜单效果的过程中,我们首先需要理解的是HTML、CSS和JavaScript三者之间的关系。HTML用于构建网页的基本结构,CSS负责样式设计,而JavaScript则处理动态交互效果。在这个例子中,JavaScript的...

    经典后台左侧菜单

    在后台左侧菜单的场景下,JavaScript可能被用来控制菜单的展开与折叠,通过修改CSS的display属性实现菜单项的隐藏与显示。同时,JavaScript还可以实现异步加载,当用户点击某个菜单项时,根据其对应的URL加载相应的...

    模仿XP左侧菜单 javascript

    在IT领域,模仿XP左侧菜单是一项常见的网页设计任务,它涉及到使用HTML、CSS和JavaScript来创建类似Windows XP操作系统中左侧导航栏的用户体验。这个任务旨在为网页提供清晰、直观的导航结构,使得用户能够轻松地...

    HTML jquery实现左侧菜单折叠

    本教程将深入讲解如何使用HTML和jQuery技术来实现一个可折叠的左侧菜单,这对于初学者来说是一个很好的实践项目。 首先,HTML(超文本标记语言)是网页内容的基础框架,用于定义页面结构。在构建左侧菜单时,我们...

    JS左侧无限级菜单导航

    本项目“JS左侧无限级菜单导航”就是针对这一需求而设计的,它采用JavaScript语言实现,兼容各大浏览器,确保了在各种环境下都能提供稳定且流畅的用户体验。 1. **无限级导航**: 无限级菜单指的是菜单项可以...

    ElementUI之首页导航及左侧菜单(模拟实现)

    当用户点击导航栏时,可以更新`isCollapse`以显示或隐藏左侧菜单。 ```javascript data() { return { isCollapse: false, navItems: [{ text: '首页', route: '/' }, { text: '关于', route: '/about' }], ...

    很好用的JS左侧导航菜单,滑过显示,移开隐藏

    标题提到的"很好用的JS左侧导航菜单,滑过显示,移开隐藏"是一种常见的交互设计模式,它利用JavaScript(JS)来实现动态效果,增强用户的浏览体验。这种设计通常被称为“悬停显示”或“滑过菜单”,它在鼠标悬停时...

    js左侧隐藏菜单带有二级子菜单

    本项目涉及的"js左侧隐藏菜单带有二级子菜单"是针对这种需求的具体实现,下面将详细介绍其相关知识点。 1. **JavaScript(JS)基础**: JavaScript 是一种轻量级的解释型编程语言,主要用于网页和网络应用的动态...

    用JQuery实现web左侧菜单的实现

    通过以上步骤,我们就成功地用jQuery实现了Web应用中的左侧菜单功能,包括点击展开/关闭子菜单以及鼠标悬停时的视觉反馈。这只是一个基础实现,实际项目中可能需要根据需求进行更复杂的定制,例如添加动画过渡、响应...

    js左侧菜单栏样式

    本主题聚焦于使用JavaScript实现的左侧菜单栏,特别是包含二级菜单的样式设计以及平滑的移动效果。下面将详细讨论相关知识点。 一、JavaScript基础 JavaScript 是一种广泛使用的客户端脚本语言,它可以直接在用户的...

    2013仿京东的左侧菜单

    3. **动画效果**:使用`.slideUp()`和`.slideDown()`方法实现菜单的隐藏和显示。 4. **AJAX**:可能结合AJAX异步加载分类数据,提高页面加载速度。 总结起来,2013仿京东的左侧菜单是一个结合了设计与技术的实践...

    仿京东左侧产品分类弹出菜单

    此外,可能还会使用`&lt;div&gt;`元素来创建弹出层,并通过CSS控制其显示和隐藏。 其次,CSS(Cascading Style Sheets)用于美化和布局网页元素。在设计弹出菜单时,CSS将起到关键作用,包括设置字体、颜色、边距、浮动、...

    jquery 导航栏 隐藏 左侧

    "jquery 导航栏 隐藏 左侧"的主题就是关于如何使用jQuery来实现一个可隐藏在屏幕左侧的导航菜单。 首先,我们来理解jQuery的基本概念。jQuery是一个轻量级、高性能的JavaScript库,简化了HTML文档遍历、事件处理、...

    css3 transform 14种侧边栏导航的隐藏和显示动画效果

    在本文中,我们将深入探讨如何使用CSS3的`transform`属性来实现14种不同的侧边栏导航隐藏和显示的动画效果。这些效果对于优化移动设备和其他小屏幕设备的用户体验至关重要,因为它们允许用户轻松地访问和隐藏导航...

    左侧菜单栏滑动效果

    首先,实现左侧菜单栏滑动效果主要依赖于HTML、CSS和JavaScript(通常使用jQuery库)这三种技术。HTML用于构建菜单的基本结构,CSS负责样式和布局,而JavaScript则用于添加动态行为。 1. HTML 结构: - 创建一个`...

Global site tag (gtag.js) - Google Analytics