简单实现js菜单栏切换效果
分享一个小案例,实现菜单栏的切换,点击左侧边栏,展示右侧主体的页面,供大家参考,具体内容如下
首先实现html页面的编写:
<div id="header"></div> <div id="main"> <!--左侧边栏--> <div class="affix"> <h4>用户中心</h4> <ul> <li><a href="#container-myorder" rel="external nofollow" >我的订单</a></li> <li><a href="#container-buy-stat-canvas" rel="external nofollow" >消费统计(Canvas版)</a></li> <li><a href="#container-buy-stat-svg" rel="external nofollow" >消费统计(SVG版)</a></li> <li><a href="#container-luck-lottery" rel="external nofollow" >幸运抽奖</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伸缩菜单栏实现代码分享
本文实现了点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来.具体代码如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; pad
-
非常酷的js图形渐隐导航菜单栏
body { background:#799AE1; margin:0px; font:normal 12px 宋体; } table { border:0px; } td { font:normal 12px 宋体; } img { vertical-align:bottom; border:0px; } a { font:normal 12px 宋体; color:#215DC6; text-decoration:none; } a:hover { color:#428EFF } .sec_
-
最常见的左侧分类菜单栏jQuery实现代码
打开京东.淘宝等各大类网站,最常见的就是左侧分类菜单栏了,既然这么常见的功能,那么应该怎么去实现它呢,接下来,我会在js中介绍两种实现方式,一种是引入jQuery的实现方式,一种是不引入jQuery的原生js的实现方式~~ 先看效果: 一.先准备资料 1)如果你们是用jQuery来开发网站的,肯定先要准备jQuery.js呀,这个百度一搜就有.不用jQuery开发的,可以忽略此步骤 2)准备一些图片,鼠标右键 > 图片另存为就可以保存 icon_nav.jpg: img_226x40.jpg:
-
JS实现自动固定顶部的悬浮菜单栏效果
本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
-
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学
-
基于jQuery实现左侧菜单栏可折叠功能
今天给大家介绍一下左侧菜单栏可折叠功能,在后台管理中左侧菜单折叠功能是特别常见的一个功能,基本不管是什么类型的管理后台都会涉及到这个功能的实现. 今天给大家介绍的是二级可折叠菜单的功能,相对一级的菜单折叠功能就显得稍微比较复杂一点了,我这里将给大家介绍菜单折叠过程中三种变换形式. 第一种变换形式是:不管点击哪一级菜单都可以打开或者关闭本级菜单,但是不会影响其他级别的菜单: <!DOCTYPE html> <html lang="en"> <head>
-
Vue.js组件tree实现无限级树形菜单
分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c
-
基于vue.js实现侧边菜单栏
侧边菜单栏应该是很多项目里必不可少的 自己手写了一个 下面是效果图 下面就说一下实现的过程 还是比较简单的 首先导入一下需要的文件 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" typ
-
Vue.js 递归组件实现树形菜单(实例分享)
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m
-
简单实现js菜单栏切换效果
分享一个小案例,实现菜单栏的切换,点击左侧边栏,展示右侧主体的页面,供大家参考,具体内容如下 首先实现html页面的编写: <div id="header"></div> <div id="main"> <!--左侧边栏--> <div class="affix"> <h4>用户中心</h4> <ul> <li><a href=&qu
-
简单实现js选项卡切换效果
本文实例为大家分享了js选项卡切换效果的具体代码,供大家参考,具体内容如下 实现思路: 1.首先获取id元素. 2.for循环历遍按钮元素添加onclick事件. 3.排他思想,点击按钮时设置所有选项卡按钮样式为空,利用this关键字指定当前选项卡获得高亮样式. 4.下面的多个div内容块以此类推. 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
-
最简单的js图片切换效果实现代码
无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]
-
js实现简单选项卡与自动切换效果的方法
本文实例讲述了js实现简单选项卡与自动切换效果的方法.分享给大家供大家参考.具体分析如下: 这里再上篇<js实现简单的可切换选项卡效果>基础上,进一步实现可以自动切换的切换效果,用这种效果就可以做简单的焦点图了. 说明: 设置一个标识数字置为0,写一个每过几秒标识+1,执行切换效果的函数,然后执行. 当标识超过当前选项卡长度让标识置为0. 在鼠标移到选项卡的时候关闭定时器,鼠标移走的时候打开定时器. <!DOCTYPE html> <html> <head>
-
很棒的js选项卡切换效果
本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下 js选项卡切换代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Auth
-
很实用的js选项卡切换效果
本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下 js选项卡切换代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="gb2312"> <title>实践题 - 选项卡</title> <style type="text/css"> *{ margin:0px; p
-
完美实现js选项卡切换效果(一)
本文实例为大家分享了js选项卡切换的具体代码,可以手动切换,另设置定时器可使其自动切换,供大家参考,具体内容如下 效果如图: 具体代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"&g
-
完美实现js选项卡切换效果(二)
本文实例为大家分享了js选项卡切换的具体代码,供大家参考,具体内容如下 通过设置定时器实现延时0.5s切换,一个重要的技巧是定义了一个that变量来存放当前指针this. 之所以不能在这直接引用this是因为setTimeout是window对象,用this的话会指向定时器,所以要在前面定义一个变量. 还要注意调用定时器前要判断是否存在准备执行的定时器. 效果如图: 具体代码: <!DOCTYPE html> <html> <head lang="en"&
-
简单实现js无缝滚动效果
本文实例为大家分享了js无缝滚动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } img{ vert
-
简单实现js鼠标跟随效果
本文实例为大家分享了js鼠标跟随效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div{ margin:0; padding:0; } #box{ position:relative; m
随机推荐
- Swift心得笔记之字符串
- 跟着Jquery API学Jquery之一 选择器
- 原生js模拟淘宝购物车项目实战
- 关于华为设备产品型号解释
- 您用户网站被黑的原因和解决办法
- 设计模式之责任链模式_动力节点Java学院整理
- perl 标量和运算符的一些知识介绍
- JS返回上一页实例代码通过图片和按钮分别实现
- Android编程之消息机制实例分析
- python使用Tkinter显示网络图片的方法
- Python分治法定义与应用实例详解
- 利用Python破解验证码实例详解
- ASP+FSO可视化目录编历(可增、删、改)下载
- 用ASP实现对MP3曲目信息的操作
- 探讨Ajax中有关readyState(状态值)和status(状态码)的问题
- 被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
- 微信小程序 天气预报开发实例代码源码
- C++与C#互调dll的实现步骤
- .NET中如何将文本文件的内容存储到DataSet
- 微信小程序 scroll-view实现上拉加载与下拉刷新的实例