简单实现js菜单栏切换效果


Posted in Javascript onMarch 04, 2017

分享一个小案例,实现菜单栏的切换,点击左侧边栏,展示右侧主体的页面,供大家参考,具体内容如下

首先实现html页面的编写:

<div id="header"></div>
<div id="main">
 <!--左侧边栏-->
 <div class="affix">
 <h4>用户中心</h4>
 <ul>
 <li><a href="#container-myorder" >我的订单</a></li>
 <li><a href="#container-buy-stat-canvas" >消费统计(Canvas版)</a></li>
 <li><a href="#container-buy-stat-svg" >消费统计(SVG版)</a></li>
 <li><a href="#container-luck-lottery" >幸运抽奖</a></li>
 </ul>
 </div>
 <!--右侧主体区域-->
 <div class="right-body">
 <div class="active" id="container-myorder">我的订单</div>
 <div id="container-buy-stat-canvas">消费统计(Canvas)</div>
 <div id="container-buy-stat-svg">消费统计(SVG)</div>
 <div id="container-luck-lottery">幸运抽奖</div>
 </div>
</div>
<div id="footer"></div>

其次是css效果实现:

#main .affix {
 box-sizing: border-box;
 width: 210px;
 float: left;
 padding: 15px;
}
.affix h4 {
 font-size: 1.2em;
 margin: 10px 0;
}
.affix ul li{
 padding: 5px 20px;
}
.affix ul li.active a{
 color: #e4393c;
 font-weight: bold;
}
#main .right-body {
 box-sizing: border-box;
 margin-left: 210px;
 padding: 15px;
}
#main .right-body > div {
 display: none;
 min-height: 300px;
}
#main .right-body > div.active {
 display: block;
}

最后一步运用简单的js实现点击左侧边栏选项,展示右侧主体区域:

$('.affix ul li a').click(function(e){
 e.preventDefault();
 //修改li的active的位置
 $(this).parent().addClass('active').siblings('.active').removeClass('active');
 //修改右侧主体中的div的active的位置
 var id = $(this).attr('href');
 $(id).addClass('active').siblings('.active').removeClass('active');
});

综上一个简单的菜单切换就实现了。

更多菜单效果点击《JavaScript菜单专题》学习,还有一些不错的专题分享给大家: Javascript级联菜单特效汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 #Javascript
js css3实现图片拖拽效果
Mar 04 #Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 #Javascript
JavaScript中最常见的三个面试题解析
Mar 04 #Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 #Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 #Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 #Javascript
You might like
什么是MVC,好东西啊
2007/05/03 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
php的ajax简单实例
2014/02/27 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
python递归计算N!的方法
2015/05/05 Python
安装dbus-python的简要教程
2015/05/05 Python
python返回昨天日期的方法
2015/05/13 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
公司委托书怎么写
2014/08/02 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
五年级学生期末评语
2014/12/26 职场文书
个人工作决心书
2015/09/22 职场文书