简单实现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 相关文章推荐
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
js实现两点之间画线的方法
May 12 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
命令行批量截图Node脚本示例代码
Jan 25 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
详解JS函数防抖
Jun 05 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 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
CI配置多数据库访问的方法
2016/03/28 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
BootStrap TreeView使用实例详解
2017/11/01 Javascript
Element Input组件分析小结
2018/10/11 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python面向对象进阶学习
2019/05/21 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
招股说明书范本
2014/05/06 职场文书
学校周年庆活动方案
2014/08/22 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL