JQuery导航菜单选择特效
网络编程 发布日期：2025/11/14 浏览次数：1
正在浏览：JQuery导航菜单选择特效
一、实现效果
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">