信鸽网

JQuery导航菜单选择特效

  作者：bea

一、实现效果 1.初始化效果：未添加样式和特效 2、添加CSS样式 3、最终效果 二、JQuery代码 <!--编写JQuery代码--><script type="text/javascript">$(document).ready(function(){$(".level>a").click(function(){$(this).addClass("current") //给当前元素添加current样式.next()

一、实现效果


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




2、添加CSS样式




3、最终效果


 


二、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>





有用  |  无用

猜你喜欢

您可能感兴趣的文章: