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 相关文章推荐
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
js调用网络摄像头的方法
Dec 05 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
什么是MVC,好东西啊
2007/05/03 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
python创造虚拟环境方法总结
2019/03/04 Python
Python字典对象实现原理详解
2019/07/01 Python
python set集合使用方法解析
2019/11/05 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
英文版餐饮运营管理求职信
2013/11/06 职场文书
医科学校毕业生自荐信
2013/11/09 职场文书
应用心理学个人的求职信
2013/12/08 职场文书
法学院毕业生求职信
2014/06/25 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
考试作弊检讨书
2015/01/27 职场文书
社会实践活动报告
2015/02/05 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
德劲DE1108畅想
2021/04/22 无线电
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
详解Spring事件发布与监听机制
2021/06/30 Java/Android