JQuery导航菜单选择特效

(编辑：jimmy 日期: 2025/12/25 浏览：3 次 )

一、实现效果

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

上一篇：详解jQuery中的empty、remove和detach
下一篇：JavaScript实现图片自动加载的瀑布流效果