Li element not remaining selected on the click of it

Question

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>

Are you talking of hover. What I want is when I click the li item it should remain hightlighted. When I run the snippet I dont see that happening — Tom, Mar 06 '17 at 16:31
I get an error Server Error in '/' Application. The resource cannot be found. Hence cant see the button — Tom, Mar 06 '17 at 16:32
Well, yes. That's because the URL doesn't exist on the Stack Overflow server - it's an example. — Rory McCrossan, Mar 06 '17 at 16:33
No. The menu is in the partial view .I am calling this partial view when I load Team view and UserProfile view — Tom, Mar 06 '17 at 16:33
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/137364/discussion-between-tom-and-rory-mccrossan). — Tom, Mar 06 '17 at 16:38

sergdenisov · Answer 1 · 2017-03-15T10:01:05.870

6

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 !important rule 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>

edited Mar 15 '17 at 10:01

answered Mar 08 '17 at 22:13

sergdenisov

8,327
9
48
63

This example works but I need to get the html.action link working. The html.action link is the preferred approach in MVC and it is not recommended to use the a tag directly and have a url manually written. – Tom Mar 08 '17 at 22:39
1

@Tom yes, I understand, I used `` only to make the snippet works, because in your snippet it doesn't really work, `@Html.ActionLink` there — simply plain text. Create the working snippet please, for example, here — https://dotnetfiddle.net, I'll try to help you. – sergdenisov Mar 09 '17 at 09:08
@Tom also, you could simply try to use my HTML/CSS/jQuery code and change my `` elements to your `@Html.ActionLink`s, but add CSS class `nav__link` to them. See [this topic](http://stackoverflow.com/questions/1444495/how-do-i-apply-a-css-class-to-html-actionlink-in-asp-net-mvc) about adding CSS class to `@Html.ActionLink`. – sergdenisov Mar 09 '17 at 13:24
In your code , you have set class for both li and a tag. I just have an html.action inside the li. How do i set the class for the a tag as the a tag is generated at run time – Tom Mar 09 '17 at 13:32
@Tom yeah, you're right. Then you could use [Event Delegation](https://learn.jquery.com/events/event-delegation/). Check out my updated answer (I've changed only the first line in Javascript). – sergdenisov Mar 09 '17 at 13:54
Hey Sergey updated the post. Cant understand why it is not working. God the code quite similar to yours. Even the alert method doesnt fire – Tom Mar 10 '17 at 10:10
Now I may not need event delegation as I am able to apply the class to the anchor tag as well. What was your previous code. Could you test my code and see if it works at your end – Tom Mar 10 '17 at 10:14
@Tom check it out — https://jsfiddle.net/8nd3sb95/2/. I took your code and changed: you forgot to add `adminnav` CSS class to `
– sergdenisov Mar 10 '17 at 12:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/137755/discussion-between-tom-and-sergey-denisov). – Tom Mar 10 '17 at 12:24

Daniele De Matteo · Answer 2 · 2017-03-06T16:59:18.647

2

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.

edited Mar 06 '17 at 16:59

answered Mar 06 '17 at 16:48

Daniele De Matteo

114
6

I tried putting an alert in the click function and it doesnt fire. – Tom Mar 08 '17 at 15:42
It doesnt seem to add the class on the click event – Tom Mar 08 '17 at 15:43
Whilst this may theoretically answer the question, [it would be preferable](http://meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Heretic Monkey Mar 08 '17 at 16:25

Rahul · Answer 3 · 2017-03-14T11:28:57.373

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:

JavaScript is modified to target the list-items, not hyperlinks within the 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.

score 1 · Answer 4 · answered Mar 07 '17 at 16:55

For a quick and easy hack which allows elements to respond when clicked but which does not require any scripting:

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

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>

I added the tabindex = 0 to my li element. The hover works however the focus doesnt. Dont know the reason why — Tom, Mar 08 '17 at 15:41
I put a different colour for the focus to test. So It does change when i click but it gets to the original colour later — Tom, Mar 08 '17 at 15:46

score 1 · Answer 5 · answered Mar 08 '17 at 23:20

1

The reason I believe your code might not be working is this line

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

You have included the anchor "a" on the selector eventhough you want to be highlighting the "li" tag. It should be more like this:

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

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

answered Mar 08 '17 at 23:20

Louis Amon

15
2

i tried this and it foesnt seem to work. Can you share the fiddle soloution – Tom Mar 08 '17 at 23:42
Here is the fiddle solution. – Louis Amon Mar 08 '17 at 23:57
Here is the fiddle solution. https://fiddle.jshell.net/mh2gqmju/3/ I have added a few things to the code to prevent the default behaviour of clicking the link. This solution has "a" on the selector. If you go to the solution and remove the "a" tag this should work as intended – Louis Amon Mar 09 '17 at 00:11
Are you sure it works as I can see only the hover working which it does in my case. I am looking at setting the listitem as selected when clicked – Tom Mar 09 '17 at 09:34
I tried it again. Very close but still need to achieve the desired result. I have noticed a pattern. If i click on between one of the items then one of the items get selected. But if i directly select on any one item then it doesnt. So when I inspect the area between the two elements it is list element i believe. So what I am suspecting is that only on click of the li it happens .How to do the same for the anchor tag too – Tom Mar 09 '17 at 10:11

score 1 · Answer 6 · answered Mar 14 '17 at 07:49

<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's good for query..

score 1 · Answer 7 · answered Mar 14 '17 at 08:58

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

Old css :-

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

Changed to :-

padding: 2px 1px 1px 1px ;

See the screen shot

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

@Tom - please check the above answer – prog1011 Mar 14 '17 at 09:02 — prog1011, Mar 14 '17 at 09:02

score 1 · Answer 8 · answered Mar 15 '17 at 07:08

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>

Li element not remaining selected on the click of it

8 Answers8