FireMonkey92 Ответов: 1

Как установить активный класс в меню, если я использую ui-sref=""?

<ul class="main-menu" id="main-menu">
        <li class="main-menu__item active" ui-sref="home">
            <a href="">
                <div class="title">DASHBOARD</div>
            </a>
        </li>

        <li class="main-menu__item" ui-sref="settings">
            <a href="">
                <div class="title">CONFIGURACIÓN</div>
            </a>
        </li>
</ul>

<pre lang="CSS">
.main-menu__item a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 55px;
    padding-left: 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    cursor: pointer;
}
.main-menu__item.active a .title {
    color: #f49e00;
}


Что я уже пробовал:

$('li.main-menu__item').click(function(){
    $('li.main-menu__item').removeClass("active");
    $(this).addClass(" active");
});


It is working fine but only when i click second time to the same menuitem, first time when i clicks on the link, active class is added but only for second.
is there any other way to solve this using angularjs or jquery? please suggest.
thanks in adv.

1 Ответов

Рейтинг:
1

Richard Deeming

Если вы хотите остаться на той же странице и обновить класс нажатого элемента, то вам нужно запретить браузеру переходить по гиперссылке:

$('li.main-menu__item').click(function(e){
    $('li.main-menu__item').removeClass("active");
    $(this).addClass(" active");
    e.preventDefault();
});
Демонстрация[^]

Если вы хотите перейти по гиперссылке для загрузки новой страницы, то вам нужно будет изменить активный элемент в HTML, который вы возвращаете с новой страницы. Либо отредактируйте статическую HTML-страницу, либо используйте серверный код для создания меню.