简单实现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代码实现selece二级联动(推荐)
Feb 18 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
详解Vue的options
May 15 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
浅谈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
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
Linux的文件类型
2016/07/05 面试题
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
教师求职自荐信
2014/03/09 职场文书
三好学生事迹材料
2014/12/24 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python