Li element does not remain selected by click

Question

I created a li element with Html.ActionLink , which ultimately is a binding. I used CSS to hang, and it works great.

Now when I click on it, I need to select the li field. I used jQuery but this does not work. I checked the debugger tools and there seemed to be no errors. Therefore, I assume that the case when the class is not applied. I do not know what the problem is. 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> 

Answer 1

• You should read the CSS Specifics : your .highlightMenu {} selector will never be applied because the .#navcontainer ul li {} selector is more specific. Prefer class selector , check BEM methodology .

• From the MDN about !important :

  Using !important , however, is bad practice and should be avoided because it makes debugging difficult by breaking the natural cascade in your style sheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with more specificity will be applied.

• If you want to set the .highlightMenu class to <li> when you click on <a> , you can use jQuery . closeest () for this.

• If you add list items dynamically, you can use Event Delegation .

I cleaned your code and rewrote it in BEM-style with corrections, check:

 $('.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> 

Answer 2

I slightly modified your CSS and your script. Now the new class is added correctly to the elements.

Please see https://fiddle.jshell.net/mh2gqmju/

All the best.

Answer 3

What you do wrong is aimed at the hyperlink, while you need to select only the list item.

But now, if you correct your code to target a list of items in the list instead of hyperlinks, you will not be able to see the changes on the screen. (You might see classes switching in the browser developer tools, though, obviously).

Why is that? Since the hyperlink inside the list item hides all the changes that you want to see when you click on the list item.

I added another CSS property to .highlightMenu so you notice the changes.

See for yourself:

• JavaScript modified to target list items, not hyperlinks in ul in #navcontainer
• .highlightMenu contains one additional CSS property (outline) to notice style changes in 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 this helps.

Answer 4

For a quick and easy hack that allows elements to respond when clicked, but does not require any scripts:

• add attribute tabindex="0" to the element
• apply styles to an element using the :focus pseudo- :focus

Working example:

 li { display: inline-block; width: 100px; height: 100px; color: rgb(227, 227, 227); background-color: rgb(127, 127, 127); text-align: center; vertical-align: top; } li:nth-of-type(1):hover { color: rgb(255, 255, 0); background-color: rgb(255, 0, 0); } li:nth-of-type(1):focus { color: rgb(255, 255, 255); background-color: rgb(0, 127, 0); } li:nth-of-type(2):hover { color: rgb(255, 0, 0); background-color: rgb(255, 255, 0); } li:nth-of-type(2):focus { color: rgb(255, 255, 255); background-color: rgb(127, 127, 255); } 

 <ul> <li tabindex="0"> Red on<br />Hover <br /><br /> Green on<br />Click </li> <li tabindex="0"> Yellow on<br />Hover <br /><br /> Blue on<br />Click</li> </ul> 

Answer 5

I suppose your code may not work, this is a line

 $('#navcontainer ul li a').click(function() 

You included the anchor "a" in the selector event, although you want to highlight the label "li" . It should be something like this:

 $('#navcontainer ul li').click(function() 

I checked this on fiddle.jshell and it seems to have solved the problem.

Answer 6

 <code> $(document).ready(function() { $(document).on('click', '#navcontainer ul li a', function () { $('.highlightMenu').removeClass('highlightMenu'); $(this).addClass('highlightMenu'); });`enter code here` }); </code> <br> Please use the above added code i believe it good for query.. 

Answer 7

Your code is correct ... you just need to modify your .css bit.

Old css: -

  padding: .2em 3em 1em 1em; 

Changed: -

 padding: 2px 1px 1px 1px ; 

See screenshot

 $(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; cursor:pointer; 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: 2px 1px 1px 1px ; /*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><a> Team Management </a></li> <li><a>User Management</a></li> </ul> </div> 

Answer 8

I made some changes to css and jquery

 $(document).ready(function() { $('#navcontainer ul li').click(function(e) { e.preventDefault(); // Remove this line please, just for this example $(this).addClass('highlightMenu').siblings().removeClass('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: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; } #navcontainer ul li.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><a href="/admin/team">Team Management</a></li> <li><a href="/admin/userprofile">User Management</a></li> </ul> </div>