Active class is reset

0

In the following very simple Script. Why, after switching to Active and coloring it of the desired color, once the view has been loaded, is the asset reset to the active item by Default? what will be happening.

HTML

<div class="list-group">
<a class="list-group-item active" href="@Url.Action("Index", "Sistema")"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Inicio</a> 
<a class="list-group-item" href="@Url.Action("Users", "Sistema")"><i class="fa fa-user-o fa-fw" aria-hidden="true"></i>&nbsp; Usuarios</a>
<a class="list-group-item" href="@Url.Action("Ajustes", "Sistema")"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Ajustes</a>
</div>

JS

$(function () {
    //Elementos de la Lista
    var Items = $(".list-group a");

    // manejador de click sobre todos los elementos
    Items.click(function () {

        // eliminamos active de todos los elementos
        Items.removeClass('active');

        // activamos el elemento clicado.
        $(this).addClass('active');
    });
});

CSS

.active {
    background: #337AB7;
}
    
asked by Archer_A 23.05.2017 в 00:00
source

1 answer

0

In the HTML of the view you set that the first active option always shows:

<a class="list-group-item active" href="@Url.Action("Index", "Sistema")">

When they click on any other link you set the active class for that link, which modifies its appearance. But you also navigate to the selected page.

When navigating to the new page, the view is rendered again with the menu and therefore the first option becomes active again.

When rendering the menu you should set the option of the page that is being displayed active, not always the first one.

    
answered by 23.05.2017 в 00:11