Creé un elemento li con Html.ActionLink que se representa en última instancia como una etiqueta de anclaje. He aplicado CSS para hover y funciona perfectamente bien.
Ahora necesito resaltar el cuadro li cuando hago clic en él. He usado jQuery pero parece que no funciona. Revisé las herramientas del depurador y no parece haber ningún error. Así que supongo que es el caso de que la clase no se aplica. No estoy seguro de cuál es el problema. Por favor vea mi código abajo.
$(document).ready(function() { $('#navcontainer ul li a').click(function() { $('.highlightMenu').removeClass('highlightMenu'); $(this).addClass('highlightMenu'); }); }); #navcontainer ul { display: block; list-style-type: disc; padding-top: 40px; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; } #navcontainer ul li { display: inline-block; /*height: 50px; width:150px;*/ border: 5px solid #009ddc; border-left: 5px solid #009ddc; border-right: 5px solid #009ddc; border-bottom: 5px solid #009ddc; border-top: 5px solid #009ddc; z-index: 0 !important; padding: 0; background: #fff; color: #24387f !important; } #navcontainer li a:hover { color: #fff !important; background-color: #009ddc; } #navcontainer ul li a { text-decoration: none; padding: .2em 3em 1em 1em; color: #24387f !important; font-size: larger; font-weight: bold; } .highlightMenu { color: #fff !important; background-color: #009ddc; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="navcontainer"> <ul class="nav navbar-nav navbar-left text-center"> <li>@Html.ActionLink("Team Management", "Team", "Admin", null, null)</li> <li>@Html.ActionLink("User Management", "UserProfile", "Admin", null, null)</li> </ul> </div>Debería leer sobre la especificidad de CSS : su selector .highlightMenu {} nunca se aplicará, porque .#navcontainer ul li {} es más específico. Prefiere selectores de clase , consulte la metodología BEM .
De MDN sobre !important :
Sin embargo, usar
!importantes una mala práctica y debe evitarse porque dificulta la depuración al romper la cascada natural en sus hojas de estilo. Cuando se aplican a un mismo elemento dos declaraciones contradictorias con la regla!important, se aplicará la declaración con mayor especificidad.
Si desea establecer la clase .highlightMenu en <li> al hacer clic en <a> , puede usar jQuery .closest() para ello.
Si agrega elementos de lista dinámicamente, puede usar Delegación de eventos .
Limpié su código y lo reescribí en estilo BEM con las correcciones, consulte:
$('.nav').on('click', '.nav__link', function() { $('.nav__item_selected').removeClass('nav__item_selected'); $(this).closest('.nav__item').addClass('nav__item_selected'); }); .nav { display: block; list-style-type: disc; padding-top: 40px; } .nav__item { display: inline-block; border: 5px solid #009ddc; padding: 0; background: #fff; color: #24387f; } .nav__item:hover, .nav__item_selected { color: #fff; background-color: #009ddc; } .nav__link { display: inline-block; text-decoration: none; padding: 0.2em 3em 1em 1em; color: #24387f; font-size: larger; font-weight: bold; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav"> <li class="nav__item"> <a class="nav__link" href="#">Team Management</a> </li> <li class="nav__item"> <a class="nav__link" href="#">User Management</a> </li> </ul>He cambiado un poco tu CSS y tu script. Ahora la nueva clase se agrega correctamente a los elementos.
Por favor, eche un vistazo a https://fiddle.jshell.net/mh2gqmju/
Mis mejores deseos.
Lo que está haciendo mal es apuntar al hipervínculo, mientras que solo necesita resaltar el elemento de la lista.
Pero ahora, si corrige su código para apuntar al elemento de la lista en lugar de los hipervínculos, no podrá ver los cambios en la pantalla. (Sin embargo, podría ver las clases alternando en las herramientas de desarrollo del navegador, obviamente).
¿Porque? Porque el hipervínculo dentro del elemento de la lista oculta todos los cambios que desea ver cuando se hace clic en el elemento de la lista.
Agregué una propiedad CSS más al .highlightMenu para que notara los cambios.
Verse a sí mismo:
ul en #navcontainer.highlightMenu lleva ahora una propiedad CSS adicional (esquema), para notar los cambios de estilo en el evento de clic. $(document).ready(function() { $('#navcontainer ul li').click(function() { $('.highlightMenu').removeClass('highlightMenu'); $(this).addClass('highlightMenu'); }); }); #navcontainer ul { display: block; list-style-type: disc; padding-top: 40px; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; } #navcontainer ul li { display: inline-block; /*height: 50px; width:150px;*/ border: 5px solid #009ddc; border-left: 5px solid #009ddc; border-right: 5px solid #009ddc; border-bottom: 5px solid #009ddc; border-top: 5px solid #009ddc; z-index: 0 !important; padding: 0; background: #fff; color: #24387f !important; } #navcontainer li a:hover { color: #fff !important; background-color: #009ddc; } #navcontainer ul li a { text-decoration: none; padding: .2em 3em 1em 1em; color: #24387f !important; font-size: larger; font-weight: bold; } .highlightMenu { color: #fff !important; background-color: #009ddc; outline: 1px solid red; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="navcontainer"> <ul class="nav navbar-nav navbar-left text-center"> <li>@Html.ActionLink("Team Management", "Team", "Admin", null, null)</li> <li>@Html.ActionLink("User Management", "UserProfile", "Admin", null, null)</li> </ul> </div>Espero haber ayudado.