JQuery导航菜单选择特效


Posted in Javascript onApril 11, 2016

一、实现效果

1.初始化效果:未添加样式和特效

JQuery导航菜单选择特效

2、添加CSS样式

JQuery导航菜单选择特效

3、最终效果

 JQuery导航菜单选择特效

二、JQuery代码

<!--编写JQuery代码-->
<script type="text/javascript">
$(document).ready(function(){
$(".level>a").click(function(){
$(this).addClass("current") //给当前元素添加current样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除“current”样式
.next().hide(); //他们的下一个元素隐藏
return false;
})
})
</script>

三、完整代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-">
<title>JQuery制作导航栏</title>
<script type="text/javascript" src="../JQuery库文件/jquery-...min.js"></script> <!--引入JQuery库文件-->
<style type="text/css">
/*设置通用样式*/
*{
padding: ;
margin: ;
}
.box{
margin: auto;
border: solid #BEBEBE px;
width: px;
}
ul{
list-style: none;
}
a {
color:#F;
text-decoration:none;
line-height: px;
}
/*level*/
.level a{
display: block; /*!!!转换为块状元素*/
height: px;
width: px;
background-color: #EBFF;
padding-left: px;
border: solid px #BEBEBE;
}
.level a.current{
background-color:#BDEF;
}
/*level*/
.level a{
background: #ffffff;
color: #EEE;
border: none;
}
.level a:hover {
color:red;
}
.level{
display: none;
}
</style>
<!--编写JQuery代码-->
<script type="text/javascript">
$(document).ready(function(){
$(".level>a").click(function(){
$(this).addClass("current") //给当前元素添加current样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除“current”样式
.next().hide(); //他们的下一个元素隐藏
return false;
})
})
</script>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level">
<a href="#">衬衫</a>
<ul class="level">
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">短袖T恤</a></li>
<li><a href="#">长袖T恤</a></li>
</ul>
</li>
<li class="level">
<a href="#">卫衣</a>
<ul class="level">
<li><a href="#">开襟卫衣</a></li>
<li><a href="#">套头卫衣</a></li>
<li><a href="#">运动卫衣</a></li>
<li><a href="#">童装卫衣</a></li>
</ul>
</li>
<li class="level">
<a href="#">裤子</a>
<ul class="level">
<li><a href="#">短裤</a></li>
<li><a href="#">休闲裤</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Javascript 相关文章推荐
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
详解vue-cli中使用rem,vue自适应
May 06 Javascript
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 #Javascript
javascript冒泡排序小结
Apr 10 #Javascript
javascript原生ajax写法分享
Apr 10 #Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 #Javascript
jQuery实现点击水纹波动动画
Apr 10 #Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 #Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 #Javascript
You might like
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
在Django的模型中添加自定义方法的示例
2015/07/21 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
python实现排序算法解析
2018/09/08 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python识别html主要文本框过程解析
2020/02/18 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
院药学专业个人求职信
2013/09/21 职场文书
护理自荐信
2013/10/22 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
党员转正意见怎么写
2015/06/03 职场文书
工作计划范文之财务管理
2019/08/09 职场文书