简单实现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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
js中的string.format函数代码
Aug 11 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
js数组去重的方法汇总
Jul 29 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
mysql 字段类型说明
2007/04/27 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
$()JS小技巧
2007/07/21 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
js实现小星星游戏
2020/03/23 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
python保存文件方法小结
2018/07/27 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
优秀通讯员事迹材料
2014/01/28 职场文书
银行办公室岗位职责
2014/03/10 职场文书
影视广告专业求职信
2014/09/02 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
民主生活会发言材料
2014/10/20 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书