将活动班级添加到导航项 [英] Add active class to navigation items

问题描述

我在导航时遇到问题-我试图在Navigation元素和子菜单中获得一个活动类.

I have a problem with navigation - I am trying to get an active class on the navigation element and in the sub-menu.

这里是小提琴.

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:

JavaScript:

( '#nav1 .navigation_active li' ).on( 'click', function () {
    $( '#nav1 .navigation_sub' ).find( 'li.navigation_active' ).removeClass( 'navigation_active' );
    $( this ).parent( 'li' ).addClass( 'navigation_active' );
});

推荐答案

您可以参考以下工作链接.

You can refer the below working link.

$(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' );
});
});

https://jsfiddle.net/e3qLb1zr/24/

这篇关于将活动班级添加到导航项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！