简单实现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 相关文章推荐
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
BootstrapValidator实现表单验证功能
Nov 08 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
php编写一个简单的路由类
2011/04/13 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
javascript 必知必会之closure
2009/09/21 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
es6学习之解构时应该注意的点
2017/08/29 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
PyQt5实现画布小程序
2020/05/30 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
大学生实习推荐信
2015/03/27 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis