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">
</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>
</td>
<td bgcolor="#0A5C8E" width="8px">
</td>
</tr>
</table>
分享到:
相关推荐
在本项目中,我们以一个实验管理系统的实例来探讨如何构建一个后台管理系统,重点在于实现左侧菜单与右侧内容的交互功能。这个系统采用了一系列前端技术,包括jQuery、HTML、CSS和Bootstrap,为开发者提供了一个快速...
在左侧菜单和右侧内容的布局中,CSS可以帮助我们设置边距、填充、浮动、定位等,确保各元素在屏幕上的位置恰到好处,同时还能实现响应式设计,让页面在不同设备上都能良好显示。 此外,提到的"没有多余功能"意味着...
本文介绍了一段使用jQuery实现模仿京东商城左侧菜单效果的代码。通过分析给定文件的内容,我们将展开对以下几个知识点的讨论: 1. jQuery的基本概念 2. jQuery鼠标事件的使用 3. CSS样式控制与动态切换 4. HTML结构...
在本案例中,我们讨论的主题是“JavaScript左侧悬浮二级菜单”,这是一种常见的网页导航设计,能够提供用户友好的浏览体验。这样的菜单通常出现在网页的左侧,始终保持可见,即使用户滚动页面,菜单也会悬浮在屏幕的...
在实现防京东左侧菜单的过程中,开发者可能会使用到以下工具: 1. 浏览器开发者工具:这是前端开发必备的工具,可以用来查看和修改网页源代码,调试JavaScript,以及模拟不同设备和浏览器环境。 2. CSS预处理器:如...
在JavaScript实现左侧菜单效果的过程中,我们首先需要理解的是HTML、CSS和JavaScript三者之间的关系。HTML用于构建网页的基本结构,CSS负责样式设计,而JavaScript则处理动态交互效果。在这个例子中,JavaScript的...
标题提到的"很好用的JS左侧导航菜单,滑过显示,移开隐藏"是一种常见的交互设计模式,它利用JavaScript(JS)来实现动态效果,增强用户的浏览体验。这种设计通常被称为“悬停显示”或“滑过菜单”,它在鼠标悬停时...
在后台左侧菜单的场景下,JavaScript可能被用来控制菜单的展开与折叠,通过修改CSS的display属性实现菜单项的隐藏与显示。同时,JavaScript还可以实现异步加载,当用户点击某个菜单项时,根据其对应的URL加载相应的...
当用户点击导航栏时,可以更新`isCollapse`以显示或隐藏左侧菜单。 ```javascript data() { return { isCollapse: false, navItems: [{ text: '首页', route: '/' }, { text: '关于', route: '/about' }], ...
在IT领域,模仿XP左侧菜单是一项常见的网页设计任务,它涉及到使用HTML、CSS和JavaScript来创建类似Windows XP操作系统中左侧导航栏的用户体验。这个任务旨在为网页提供清晰、直观的导航结构,使得用户能够轻松地...
本教程将深入讲解如何使用HTML和jQuery技术来实现一个可折叠的左侧菜单,这对于初学者来说是一个很好的实践项目。 首先,HTML(超文本标记语言)是网页内容的基础框架,用于定义页面结构。在构建左侧菜单时,我们...
本项目“JS左侧无限级菜单导航”就是针对这一需求而设计的,它采用JavaScript语言实现,兼容各大浏览器,确保了在各种环境下都能提供稳定且流畅的用户体验。 1. **无限级导航**: 无限级菜单指的是菜单项可以...
本项目涉及的"js左侧隐藏菜单带有二级子菜单"是针对这种需求的具体实现,下面将详细介绍其相关知识点。 1. **JavaScript(JS)基础**: JavaScript 是一种轻量级的解释型编程语言,主要用于网页和网络应用的动态...
通过以上步骤,我们就成功地用jQuery实现了Web应用中的左侧菜单功能,包括点击展开/关闭子菜单以及鼠标悬停时的视觉反馈。这只是一个基础实现,实际项目中可能需要根据需求进行更复杂的定制,例如添加动画过渡、响应...
本主题聚焦于使用JavaScript实现的左侧菜单栏,特别是包含二级菜单的样式设计以及平滑的移动效果。下面将详细讨论相关知识点。 一、JavaScript基础 JavaScript 是一种广泛使用的客户端脚本语言,它可以直接在用户的...
3. **动画效果**:使用`.slideUp()`和`.slideDown()`方法实现菜单的隐藏和显示。 4. **AJAX**:可能结合AJAX异步加载分类数据,提高页面加载速度。 总结起来,2013仿京东的左侧菜单是一个结合了设计与技术的实践...
此外,可能还会使用`<div>`元素来创建弹出层,并通过CSS控制其显示和隐藏。 其次,CSS(Cascading Style Sheets)用于美化和布局网页元素。在设计弹出菜单时,CSS将起到关键作用,包括设置字体、颜色、边距、浮动、...
"jquery 导航栏 隐藏 左侧"的主题就是关于如何使用jQuery来实现一个可隐藏在屏幕左侧的导航菜单。 首先,我们来理解jQuery的基本概念。jQuery是一个轻量级、高性能的JavaScript库,简化了HTML文档遍历、事件处理、...
例如,使用React,可以创建一个可复用的侧边菜单组件,包含状态管理(显示/隐藏)、过渡动画和事件监听等功能。Vue和Angular也有相应的内置指令和库来辅助实现动态效果。 总之,侧边显示的隐藏菜单在提升网页和应用...
首先,实现左侧菜单栏滑动效果主要依赖于HTML、CSS和JavaScript(通常使用jQuery库)这三种技术。HTML用于构建菜单的基本结构,CSS负责样式和布局,而JavaScript则用于添加动态行为。 1. HTML 结构: - 创建一个`...