问题描述:

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.

网友答案:

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;  
}  
网友答案:

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');
    });
 });
网友答案:

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');
    });
});
网友答案:

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>
相关阅读:
Top