how to highlight only selected menu item and default for others

Question

5.00/5 (1 vote)

See more:

I have a vertical menu like:

XML

<nav>
    <ul>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
    </ul>
</nav>

and made 2 classes for bg-color: default , selected
I want to apply "selected" class to the newly selected item and get the older or previousely selected item "default" class

css:
.defaultBg{ background-color: white; }
.selected{ background-color: blue; }

How can i assign this classes to those list items respectively with jquery when clicking on link tag

<a></a>

within them

Posted 23-Sep-13 4:44am

Moosavi S.M.

Updated 23-Sep-13 4:54am

Eduard Keilholz

v4

Add a Solution

3 solutions

Solution 1

You may not want the tag, because the default for an a tag is to follow a link. You can prevent the default action from occuring, but why adding the element if you don't use it.
Further it's quite simple :

JavaScript

$(document).ready({ function(){
   $("li").click(function(e){
      // A LI is clicked
      // Set all other li's to not selected
      $("li").removeClass("selected");

      // Add selected class to the clicked li
      $(this).addClass("selected");
  });
});

Note the above code assumes you removed the tags from the li elements

So to complete your question :

JavaScript

$(document).ready({ function(){
   $("li").click(function(e){
      // A LI is clicked
      // Set all selected li's to not selected and 
      $("li.selected").removeClass("selected").addClass("defaultBg");

      // Add selected class to the clicked li
      $(this).removeClass("defaultBg").addClass("selected");
  });
});

This must do the trick

Posted 23-Sep-13 4:53am

Eduard Keilholz

Updated 23-Sep-13 4:56am

v2

Comments

Sergey Alexandrovich Kryukov 23-Sep-13 11:05am

Well, it should work but... makes no practical sense at all. Why? The items are not selectable anyway.
I tried to explain why and provided more reasonable advice, please see my answer.
—SA

Solution 3

The problem is: a list item can be any HTML element, which is not "selectable". All you can do is to detect if a mouse pointer is over the item (then you can use jQuery .hover() method) or something like this.

My best advice would be this: give up such highlighting, as it would only degrade the quality of your page, no matter how you do it. You see, good design rules dictate that you should never decorate the rendering of context with some effect if it does not serve a clearly defined purpose. If selection was the property of some HTML, highlighting would be natural. Usually, when an element is highlighted, it tells the user: "click me". But your list items are not selectable I believe you are not going to process a click. In your case, it will be only confusing and won't help to make your content more readable and accessible, which should be your main goal.

—SA

Posted 23-Sep-13 5:05am

Sergey Alexandrovich Kryukov

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Moosavi S.M. · Accepted Answer · 2013-09-23T04:58:00

first

SQL

$("#rightPanel ul li.selectedBgColor")
        .toggleClass("selectedBgColor")
        .toggleClass("defaultBgColor");

then:

C#

if($(this).parent().hasClass("selectedBgColor")){

        }
        else if($(this).parent().hasClass("defaultBgColor")){
            $(this).parent().toggleClass("defaultBgColor");
            $(this).parent().toggleClass("selectedBgColor");
            var elementID = $(this).attr("value");
            var pos = $("#"+elementID).offset().top;
            $("html, body").animate({scrollTop:pos-100},500);
            return false;
        }