[英]Add active class to navigation items
我在导航时遇到问题-我试图在Navigation元素和子菜单中获得一个活动类。
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' );
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.