How to change the Menu colour when selected?

Question

I have created a menu in my asp.net website and I want the active Menu item in the menu to be highlighted when it is clicked. That is usually the menu is White but when the user choose any of the menu then it should become red. Please find below what I have tried so far:

Jquery:

 <head runat="server">
   <script type="text/javascript">
    $('.thumbnail').click(function (e) {
        $('.thumbnail').removeClass('selected');
        $(this).addClass('selected');
    });
  </script>
 <asp:ContentPlaceHolder ID="head" runat="server">
 </asp:ContentPlaceHolder>
</head>

aspx page:

 <div id="nav">
        <ul>
            <li><a href="Default.aspx" class="thumbnail">Dashboard</a> //I want this
               menu option to be Red when in the Dashboard page.

                <ul>
                    <a href="Default.aspx" class="hover">
                        <li>Servie Details</li>
                    </a><a href="Dashboard_totalusersDaily.aspx" class="hover">
                        <li>Subscribers History</li>
                    </a><a href="WhiteList.aspx" class="hover">
                        <li>Whitelist </li>
                    </a>
                </ul>
            </li>
            <li><a href="mnggroup.aspx" class="thumbnail">Subscribers</a> //I want this
              Subscrivers Menu Option to be Red when user is in this page
                <ul>
                    <a href="mnggroup.aspx" class="hover">
                        <li>Group</li>
                    </a>
                    <a href="#" class="hover">
                        <li>Subscribers Chart</li>
                    </a>
                    <a href="#" class="hover">
                        <li>Subscribers Chart by Date </li>
                    </a>
                    <a href="#" class="hover">
                        <li>Inactive Subscribers Chart</li>
                    </a>
                </ul>

            </li>
      </div>

CSS:

     .thumbnail {
    display: block;
    line-height: 2.5em;
    margin-right: 0px;
    padding: 8px 14px 8px 14px;
    color: #3d3737;
    font-weight: bold;
    font-size: 0.8em;
    text-decoration: none;
  }

  #nav ul li .selected {
    color: #ffffff;
    background-color: transparent;
    background-image: url(../Img/navaktiv.jpg);
    background-repeat: repeat-x;
}

I got this above code idea from this link: how to change menu background color when selected?

After trying this above code all of my menu items remaining white. When I choose any option it is not becoming red. Please help. Thanks in advance.

score 2 · Accepted Answer · edited Apr 24 '14 at 11:22

2

Problem is in your CSS. You have added space between "li" and class "selected".
It should be "#nav ul li.selected".

And at the same time add your code inside $(document).ready() function
Add below mention code in HTMl "head"

<script src="//code.jquery.com/jquery-1.10.2.js"></script>    
<script type="text/javascript">  
    $( document ).ready(function() {  
        $('.thumbnail').click(function (e) {  
            $('.thumbnail').removeClass('selected');  
            $(this).addClass('selected');  
        });  
    });  
</script>

Add this at bottom of CSS :-

#nav ul li.selected {  
    color: #ffffff;  
    background: url(../Img/navaktiv.jpg) repeat-x red;  
}

edited Apr 24 '14 at 11:22

Shubh

6,693
9
48
83

answered Apr 24 '14 at 09:56

Vinita Rathore

542
3
12

Please use [Editing Help](http://stackoverflow.com/editing-help) and format your answer to be more readable. – Shubh Apr 24 '14 at 10:04
Thanks a lot for your answer. But it is not working. I don't what is wrong in here with my code. when I try this link example: http://learn.yancyparedes.net/2012/05/jquery-highlighting-the-menu-item-for-the-current-page/ it is working. But then it is highlighting even the submenu's what I don't want. I want to highlight only the main menu. Thank you. – barsan Apr 24 '14 at 10:06
Colud you share screen shot here with "li.thumbnail" in clicked condition with fireebug open – Vinita Rathore Apr 24 '14 at 10:14
Check below mentioned link. Hope this is what you needed. http://jsfiddle.net/L69tt/ – Vinita Rathore Apr 24 '14 at 10:22

score 0 · Answer 2 · answered Apr 24 '14 at 09:16

0

Because you have not set background color to red in style for selected:

#nav ul li .selected {
  color: #ffffff;
  background-color: red;
  background-image: url(../Img/navaktiv.jpg);
  background-repeat: repeat-x;
}

Update:

Ensure that you have added the click handler in DOM ready:

 $(document).ready(function() {
    $('.thumbnail').click(function (e) {
        $('.thumbnail').removeClass('selected');
        $(this).addClass('selected');
    });
 });

answered Apr 24 '14 at 09:16

Milind Anantwar

81,290
25
94
125

sorry for my mistake. Actually the Background image is already red so I am expecting it to accept the background image. Thank you. – barsan Apr 24 '14 at 09:18
have you checked whether cass selected is getting added to selected element. – Milind Anantwar Apr 24 '14 at 09:19
yes I have tried. It is calling CSS class properly. Thank you. – barsan Apr 24 '14 at 09:48

score 0 · Answer 3 · answered Apr 24 '14 at 09:16

0

Since you put your jQuery code in the <head> section, try to wrap them inside DOM ready handler.

$(function() {
    $('.thumbnail').click(function (e) {
        $('.thumbnail').removeClass('selected');
        $(this).addClass('selected');
    });
});

answered Apr 24 '14 at 09:16

Felix

37,892
8
43
55

thanks for your answer. But I am quite new in Jquery so I am not so clear about DOM. Will you explain a little bit about it. – barsan Apr 24 '14 at 09:20
Did you check the docs from the link that I've provided in my answer? – Felix Apr 24 '14 at 09:21
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. – Felix Apr 24 '14 at 09:22
Thank you for the suggestion. I have tried but no hope yet. – barsan Apr 24 '14 at 09:48
But when I try from this link example: http://learn.yancyparedes.net/2012/05/jquery-highlighting-the-menu-item-for-the-current-page/ it works. But it is changing the color for the Sub-Menu too. But I need it for Main Menus only. Will you please help on that? Thank you. – barsan Apr 24 '14 at 09:51
well my problem is the menu color is not changing at all. I want the menu selected will be in another colour. But it is not happening. – barsan Apr 24 '14 at 09:52
http://learn.yancyparedes.net/2012/05/jquery-highlighting-the-menu-item-for-the-current-page/ – barsan Apr 24 '14 at 09:54

score 0 · Answer 4 · answered Apr 24 '14 at 09:17

0

Try this:

<script type="text/javascript">
    $( document ).ready(function() {
        $('.thumbnail').click(function (e) {
            $('.thumbnail').removeClass('selected');

            // How about using some troubleshooting code while you're developing this?
            console.log($(this));                
            console.log($(this).attr('class'));
            $(this).addClass('selected');
        });
    });
</script>

answered Apr 24 '14 at 09:17

the_marcelo_r

1,847
22
35

Then double-check your CSS code and put a break point on your debugger (e.g., FF's Firebug) and check how your anchor tag reacts to the changes, line-by-line. – the_marcelo_r Apr 24 '14 at 09:22
Thanks a lot. Yes I have tried to check using Firebug and found that it is going to the CSS code properly. But when I try from this link example: http://learn.yancyparedes.net/2012/05/jquery-highlighting-the-menu-item-for-the-current-page/ it works. But it is changing the color for the Sub-Menu too. But I need it for Main Menus only. Will you please help on that? Thank you. – barsan Apr 24 '14 at 09:50

How to change the Menu colour when selected?

4 Answers4