菜单实现切换效果

最新推荐文章于 2019-10-31 10:39:08 发布
最新推荐文章于 2019-10-31 10:39:08 发布
阅读量1k 收藏 1
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z8853797/article/details/45285927
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    *{margin:0;
     padding:0;
     font-size:13px;
     list-style:none;}

.menu{width:210px;
      margin:50px auto;
      border:1px solid #ccc;}

.menu p{height:25px;
        line-height:25px;
        font-weight:bold;
        background:#eee;
        border-bottom:1px solid #ccc;
        cursor:pointer;
        padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;
         line-height:24px;
         padding-left:5px;}
</style>
	<script type="text/javascript">
		window.onload = function(){
			var menu = document.getElementById("menu");
			var ps = menu.getElementsByTagName("p");
			var uls = menu.getElementsByTagName("ul");
			for(var i = 0;i < ps.length;i++){
				ps[i].id = i;
				ps[i].onclick = function(){
					for(var j = 0;j < uls.length;j++){
						uls[j].style.display = "none";
					}
					uls[this.id].style.display = "block";
				}
			}
		}
	</script>
</head>
<body>
	<div class="menu" id="menu">
		<div>
			<p>Web前端</p>
			<ul style="display:block">
				<li>JavaScript</li>
				<li>DIV+CSS</li>
				<li>jQuery</li>
			</ul>
		</div>
		<div>
			<p>后台脚本</p>
			<ul>
				<li>PHP</li>
				<li>ASP.net</li>
				<li>JSP</li>
			</ul>
		</div>
		<div>
			<p>前端框架</p>
			<ul>
				<li>Extjs</li>
				<li>Esspress</li>
				<li>YUI</li>
			</ul>
		</div>
	</div>
</body>
</html>

z8853797
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery菜单切换特效插件jGlideMenu.zip
07-04
jQuery菜单切换特效插件jGlideMenu
小程序demo--左侧栏分类
04-17
左侧栏分类
JavaScript Demo---最简单的菜单切换效果
qq_14954259的博客
02-13 545
ul{list-style: none;width: 300px;margin:0 auto;height:30px;padding-left: 0px;}     li:hover{background-color: #ccc;color:red;}     .li-current {background-color: #ccc;color:red;}     li{float:left;
关于网页菜单切换效果的尝试
【代码有bug】
07-02 775
网页菜单的切换效果实现记录： 1、利用js实现切换效果 2、利用css+js实现切换效果
python之 tkinter中菜单栏快速学习（菜单栏，弹出菜单等）
Dig_beautiful的博客
10-31 4629
主菜单，下拉菜单，单选菜单，选择菜单，弹出菜单，菜单绑定等功能的实现
易语言菜单切换效果
07-23
本文将详细探讨易语言菜单切换效果的实现方法、相关知识点以及源码分析。 首先，易语言提供了丰富的图形用户界面（GUI）组件，其中包括菜单栏组件。菜单栏是程序中用于展示功能选项的地方，用户可以通过点击不同的...
vue2.0实现导航菜单切换效果
08-30
Vue 2.0 实现导航菜单切换效果 Vue 2.0 是一个流行的前端框架，用于构建复杂的Web应用程序。今天，我们将探讨如何使用 Vue 2.0 实现导航菜单切换效果。 标题解析 标题「Vue 2.0 实现导航菜单切换效果」表明本文的...
简单实现js菜单栏切换效果
10-20
主要教大家如何简单实现js菜单栏切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯JS实现导航菜单文字上下滑动切换效果-导航菜单.zip_菜单切换效果
09-20
本示例探讨的是如何使用纯JavaScript实现一个导航菜单的文字上下滑动切换效果，这种效果可以增加用户体验，使菜单更具动态感。下面将详细解释实现这个功能的关键技术和步骤。 首先，我们需要创建HTML结构，这通常...
wxPython中工具栏、状态栏、菜单实现
weixin_34252686的博客
05-24 217
   wxPython是python可视化编程中的一个很好的模块，一以下的代码主要讲述工具栏、状态栏、菜单、菜单事件的实现（可参考：http://www.czug.org/python/wxpythoninaction/）：#!/usr/bin/env python # -*- coding: utf-8 -*- import wx import wx.py.images class T...
wxPython:菜单介绍
weixin_34162629的博客
07-13 84
本节看看菜单的创建及使用，直接看代码。 #!/usr/bin/env python # -*- coding: utf-8 -*- ''' Function:绘图 Input：NONE Output: NONE author: socrates blog:http://www.cnblogs.com/dyx1024/ d...
wxPython:工具栏、状态栏、菜单实现
weixin_34304013的博客
07-05 99
与绘制按钮一样，很简单，直接看代码： #!/usr/bin/env python # -*- coding: utf-8 -*- import wx import wx.py.images class ToolbarFrame(wx.Frame): def __init__(self, parent, id): wx...
点击菜单栏实现内容切换
宇臾的博客
07-27 4622
主要通过js以及css样式的设置来实现tab切换显示的效果
点击导航栏切换页面的几种方式
热门推荐
zsr0526的博客
03-22 5万+
1.RedioGroup+Fragment(推荐) 2.底部线性布局+帧布局(放fragment) 3.RedioGroup+Viewpager
js有层级图片切换的实现方法
冰雪为融的博客
03-14 1424
实现原理：将要变化的数据以数组的方式存放在一个空数组中，当事件响应时，通过数组方法中的push()和shift()或者unshift()和pop()方法，先将数组中的第一个或者最后一个再次添加进数组中，然后再将第一个或最后一个删除，就这样达到图片的切换。HTML代码：&lt;body&gt; &lt;div&gt; &lt;span&gt;&lt;a class="pre"&gt;&lt;...
Web jsp开发学习——点击菜单页面切换
蔡军帅
04-04 2089
Web jsp开发学习——点击菜单页面切换 两个网页使用同一个head，在点击“首页”后，head的“首页”变成绿色，点击“新闻”后，head的“新闻”变成绿色，head的“首页”恢复原来的颜色 head.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pa...
tab功能菜单——利用tab切换不同的div
邹玉杰（邹琼俊）的专栏
10-25 1万+
需求：在web界面上实现类型tab页签的效果 aspx界面代码： 充值 作废售水
vue实现顶部滑动切换菜单效果
最新发布
10-27
在Vue中实现顶部滑动切换菜单效果，可以通过以下步骤实现： 1. 首先，我们需要创建一个Vue组件来表示菜单。可以使用`v-for`指令循环渲染菜单选项，并通过`v-bind`绑定`isActive`属性来控制当前选中的菜单项。同时，设置一个`@click`事件监听器，使得点击菜单项时可以切换选中的项。 2. 在样式上，可以使用CSS来控制菜单项的样式，使得被选中的项可以突出显示。 3. 接下来，我们需要监控滚动事件。可以使用`window`对象的`scroll`事件，并将其绑定到一个滚动事件处理函数上。 4. 在滚动事件处理函数中，通过获取`window.pageYOffset`属性来获取当前滚动的位置。然后，计算出每个菜单项距离顶部的距离，与当前滚动位置进行比较。以此来判断当前应该激活哪个菜单项。 5. 最后，通过将`isActive`属性绑定到菜单项的样式上，以实现滚动切换菜单的效果。 综上所述，以上步骤可以实现Vue中顶部滑动切换菜单效果的实现。具体代码请参考以下示例： ``` <template> <div> <ul> <li v-for="(item, index) in menuItems" :key="index" :class="{ active: item.isActive }" @click="setActive(index)"> {{ item.title }} </li> </ul> </div> </template> <script> export default { data() { return { menuItems: [ { title: '菜单1', isActive: false }, { title: '菜单2', isActive: false }, { title: '菜单3', isActive: false }, ], } }, mounted() { window.addEventListener('scroll', this.handleScroll) }, destroyed() { window.removeEventListener('scroll', this.handleScroll) }, methods: { setActive(index) { this.menuItems.forEach((item, i) => { item.isActive = i === index }) }, handleScroll() { const scrollY = window.pageYOffset const menuItems = this.$refs.menuItems menuItems.forEach((item, index) => { const rect = item.getBoundingClientRect() const offsetTop = rect.top + scrollY this.menuItems[index].isActive = scrollY >= offsetTop && scrollY < offsetTop + rect.height }) }, }, } </script> <style> .active { /* 设置选中菜单项的样式 */ background-color: #ccc; } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值