简单实现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中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
JQUERY 浏览器判断实现函数
Aug 20 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
其他功能
2006/10/09 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
Display SQL Server Version Information
2007/06/21 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
js实现无缝滚动图
2017/02/22 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
PHP如何自定义函数
2016/09/16 面试题
2014年学校领导班子对照检查材料
2014/09/19 职场文书
现场施工员岗位职责
2015/04/11 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python