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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
Prototype Date对象 学习
Jul 12 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
eval的两组性能测试数据
Aug 17 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
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
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
php创建session的方法实例详解
2015/01/27 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
python的mysqldb安装步骤详解
2017/08/14 Python
Python输出带颜色的字符串实例
2017/10/10 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python实现的特征提取操作示例
2018/12/03 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
施工人员岗位职责
2013/12/12 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
一份创业计划书范文
2014/02/08 职场文书
ktv好的活动方案
2014/08/15 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
起诉书格式范文
2015/05/20 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS