首先引入 <script src="../js/jquery-3.2.1.min.js"></script>
html原文如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左侧菜单栏</title>
<style type="text/css">
a{
text-decoration:none;
}
.intro
{
color:red;
}
</style>
<script src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".left-menu").find(".menu1").eq(0).next("ul").slideDown().siblings("ul").slideUp();
});
function openveiw(n){
//alert(".code"+n);
$(".left-menu").find(".code"+n).eq(0).next("ul").slideDown().siblings("ul").slideUp();
}
function yiru(n){
$(".left-menu").find(".mv"+n).addClass("intro");
}
function yichu(n){
$(".left-menu").find(".mv"+n).removeClass("intro");
}
</script>
</head>
<body>
<div class="left-menu" style="background-color: darkgray;">
<h1 class="menu1 code1" onclick="openveiw(1);">动物</h1>
<ul class="left-ul">
<li>
<h2 class="menu2" ><a class="mv1" href="#" onmouseover="yiru(1);" onmouseout="yichu(1);">猫</a></h2>
<h2 class="menu2" ><a class="mv2" href="#" onmouseover="yiru(2);" onmouseout="yichu(2);">狗</a></h2>
<h2 class="menu2" ><a class="mv3" href="#" onmouseover="yiru(3);" onmouseout="yichu(3);">鼠</a></h2>
</li>
</ul>
<h1 class="menu1 code2" onclick="openveiw(2);">水果</h1>
<ul class="left-ul">
<li>
<h2 class="menu2" ><a class="mv4" href="#" onmouseover="yiru(4);" onmouseout="yichu(4);">香蕉</a></h2>
<h2 class="menu2" ><a class="mv5" href="#" onmouseover="yiru(5);" onmouseout="yichu(5);">番茄</a></h2>
<h2 class="menu2" ><a class="mv6" href="#" onmouseover="yiru(6);" onmouseout="yichu(1);">芒果</a></h2>
</li>
</ul>
<h1 class="menu1 code3" onclick="openveiw(3);">家具</h1>
<ul class="left-ul">
<li>
<h2 class="menu2"><a class="mv7" href="#" onmouseover="yiru(7);" onmouseout="yichu(7);">鞋柜</a></h2>
<h2 class="menu2"><a class="mv8" href="#" onmouseover="yiru(8);" onmouseout="yichu(8);">沙发</a></h2>
<h2 class="menu2"><a class="mv9" href="#" onmouseover="yiru(9);" onmouseout="yichu(9);">衣柜</a></h2>
</li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
在本项目中，我们以一个实验管理系统的实例来探讨如何构建一个后台管理系统，重点在于实现左侧菜单与右侧内容的交互功能。这个系统采用了一系列前端技术，包括jQuery、HTML、CSS和Bootstrap，为开发者提供了一个快速...
在网页设计中，左侧导航栏和右侧内容页的布局是一种常见的网页结构，广泛应用于各种网站，如企业官网、博客、论坛等。这种布局能够清晰地将网站的主要功能和具体内容划分开来，提供良好的用户体验。本篇文章将深入...
"iframe实现左侧菜单右侧页面简单示例"就是一个典型的双栏布局模式，常用于展示左侧导航菜单，右侧则展示对应的内容区域。这种设计模式在很多网站和管理系统中都很常见。 Iframe，全称"Inline Frame"，是HTML中的一...
在这个实例中，我们关注的是如何使用HTML、CSS（层叠样式表）和JavaScript来实现一个功能丰富的左侧菜单。这样的菜单通常用于大型网站或应用，因为它能够有效地组织大量链接，使用户能够快速浏览和访问不同页面。 ...
本案例“左侧栏导航实例”着重展示了如何创建一个功能完备、层次清晰的侧边导航栏，支持二级和三级菜单，适用于多层级内容展示的网站或应用。 首先，我们来看“左侧栏导航实例”的核心概念： 1. **响应式设计**：...
本资源“经典后台左侧菜单”提供了一个易于学习和修改的代码实例，主要涉及到的技术栈包括jQuery、CSS和JavaScript。 首先，jQuery是一种轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画制作。...
总结来看，本文通过实例详细介绍了如何使用Layui构建左侧菜单栏和动态操作Tab页签。通过简单的HTML结构和JavaScript代码，我们可以实现一个功能丰富且交互良好的Web界面。需要注意的是，合理引入和使用Layui的模块...
在Vue.js应用中，左侧菜单栏的刷新通常涉及到路由管理和组件的动态加载。Vue Router是Vue.js官方推荐的路由管理库，它允许我们定义和管理应用的路由，从而实现页面的无刷新跳转和菜单的动态更新。在这个场景中，我们...
【标题】"ztree左侧菜单jspDemo"是一个关于在Java Web开发中使用ZTree实现动态左侧菜单栏的实例。ZTree是一款基于JavaScript的树形插件，广泛应用于网站的导航菜单、组织结构展示等场景。它支持JSON数据格式，可以...
本主题聚焦于2013年一款仿京东的左侧菜单设计，它旨在提升用户在浏览电商网站时的导航体验。左侧菜单在电商网站中扮演着商品分类导航的重要角色，帮助用户快速找到他们感兴趣的商品或服务。 首先，我们来看"仿京东...
本实例将深入探讨如何使用C#来实现一个简易的导航菜单。 导航菜单在Web应用程序中扮演着引导用户在各个页面间跳转的角色，它通常是网页布局的关键组成部分。在左侧设置导航菜单是一种常见的设计模式，因为它可以...
这个项目“css+js实现左侧多级菜单，可扩展图标及导航图片”旨在教你如何利用CSS和JavaScript技术来构建一个灵活、可自定义的多级菜单。下面将详细阐述实现这个功能所需的知识点。 1. CSS（层叠样式表）基础： - ...
综上所述，这个"左侧放大菜单"的资源可能包含了实现这一功能的CSS代码和实例，可以帮助开发者学习如何用CSS创建动态、交互式的菜单系统。通过理解和应用这些知识点，可以提升网页的用户体验和设计质量。
在这个"Bootstrap左侧下拉三级菜单导航"项目中，我们主要探讨的是如何利用Bootstrap构建一个具有多级下拉功能的导航栏，这对于创建复杂的网站层级结构非常有用。 首先，Bootstrap的导航栏（Navbar）组件是实现这一...
解压后，通过查看源代码和应用实例，可以更直观地学习如何实现这样的导航菜单。 总之，使用jQuery构建后台左侧三级导航菜单，需要理解HTML和CSS的基础，掌握jQuery的基本操作，以及熟悉响应式设计原则。通过合理的...
本文实例为大家分享了js实现左侧菜单效果展示的具体代码，供大家参考，具体内容如下 当前所学做出来的代码量有点大，以后的学习会使它更简单 <!DOCTYPE html> <html lang="en"> <head> <meta ...
总之，“jQuery京东首页左侧菜单导航”是一个结合了选择器、事件、DOM操作、CSS控制、动画和Ajax交互等多个jQuery核心概念的实例。通过学习和实践，你不仅可以提升JavaScript技能，还能了解到如何构建一个功能完善的...
在本项目中，我们主要探讨如何使用Echarts库在网页上以百度地图为背景，实现一个具有左侧菜单的散点图展示。Echarts是一个由百度开发的开源JavaScript图表库，它提供了丰富的图表类型，适用于各种数据可视化需求。而...
这种特效是网页设计中常用的一种技术，用于创建一种始终保持在用户视野内的导航菜单，无论用户滚动页面到哪个位置，导航栏都会固定在屏幕的左侧，提供便捷的页面跳转功能。 首先，要理解js特效的核心是JavaScript...