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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python实现得到一个给定类的虚函数
2014/09/28 Python
python自动发微信监控报警
2019/09/06 Python
python如何实现单链表的反转
2020/02/10 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
赔偿协议书范本
2014/04/15 职场文书
长城导游词
2015/01/30 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
道歉的话怎么说
2015/05/12 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
高中班主任心得体会
2016/01/07 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
浅谈MySQL函数
2021/10/05 MySQL
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
springboot用户数据修改的详细实现
2022/04/06 Java/Android
vue判断按钮是否可以点击
2022/04/09 Vue.js