南强小屋 Design By 杰米

一、实现效果

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="/UploadFiles/2021-04-02/jquery-...min.js">

标签:
jquery导航特效,jquery选择特效

南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米

评论“JQuery导航菜单选择特效”

暂无JQuery导航菜单选择特效的评论...