javascript - 将活动类添加到导航项
问题描述
我的导航有问题 - 我试图在导航元素和子菜单中获得一个活动类。
HTML:
<ul id="nav1" class="navigation">
<li class="navigation__active"><a href="#"><i class="zmdi zmdi-home"></i> Home</a></li>
<li class="navigation__sub">
<a href="#"><i class="zmdi zmdi-view-week"></i> About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<ul>
CSS:
.navigation__active>a, .navigation__sub--active>a {
color: red;
}
JavaScript:
( '#nav1 .navigation_active li' ).on( 'click', function () {
$( '#nav1 .navigation_sub' ).find( 'li.navigation_active' ).removeClass( 'navigation_active' );
$( this ).parent( 'li' ).addClass( 'navigation_active' );
});
解决方案
您可以参考以下工作链接。
$(function(){
$( '#nav1' ).click(function (e) {
$(this).children().each(function(){
$(this).removeClass('navigation__active');
});
$('#nav1 .navigation__sub' ).find( 'li.navigation__active').removeClass( 'navigation__active' );
$(e.target).parent( 'li' ).addClass( 'navigation__active' );
});
});
推荐阅读
- reactjs - 如何为 React Action Hook Store 定义 Typescript 属性和类型
- go - 从 exec 命令 stdout 读取而不缓冲
- ibm-cloud-infrastructure - 存在资源时软层对象过滤器的空白响应
- python - Python ml 引擎预测:如何使 googleapiclient.discovery.build 持久化?
- git - git 想在 Windows 上将 LF 更改为 CRLF - 我该如何解决这个问题?
- c - 在C语言中使用GTK+和Cairo寻求网络摄像头图片显示的一些指导
- spring-boot - 没有从字符串值反序列化的字符串参数构造函数/工厂方法('4.01')
- sql - 检查时间范围是否覆盖 Postgres 中的 now()
- c++ - 类似联合的类和变体成员
- android - 永久禁用按钮单击按钮