I have created an li item with Html.ActionLink which renders ultimately as an anchor tag. I have applied CSS for hover and it works perfectly fine.
Now I need to highlight the li box when I click on it. I have used jQuery but that doesn't seem to work. I have checked the debugger tools and there doesn't seem to be any errors. So I guess it's the case that the class is not getting applied. I'm Not sure what the problem is. Please see my code below.
$(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>You should read about CSS Specificity: your .highlightMenu {} selector will never be applied, because .#navcontainer ul li {} selector is more specific. Prefer Class selectors, check out BEM methodology.
From MDN about !important:
Using
!important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the!importantrule are applied to the same element, the declaration with a greater specificity will be applied.
If you want to set .highlightMenu class to <li> when clicking on <a>, you could use jQuery .closest() for it.
If you add list items dynamically, you could use Event Delegation.
I've cleaned your code and rewritten it in BEM-style with the fixes, check out:
$('.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>I have changed a little bit your CSS and your script. Now the new class is added correctly to the elements.
Please, have a look at https://fiddle.jshell.net/mh2gqmju/
All the best.
What you are doing wrong is targeting the hyperlink, while you need to highlight the list-item only.
But now, if you correct your code to target the list-item in the list in place of the hyperlinks, you won't be able to see changes on the screen. (You would be able to see the classes toggling in the browser's developer tools though, obviously).
Why so? Because the hyperlink inside the list-item is hiding all the changes you want to see when the list-item gets clicked.
I added one more CSS property to the .highlightMenu in order to make you notice the changes.
See yourself:
ul in #navcontainer.highlightMenu carries one extra CSS property now (outline), to notice the style changes on the click event.$(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>I hope it helped.