asp.net active menu item highlighting

Question

i have a master page and some child pages , i want when i open a page from the menu to collapsed in and stay highlighted i have it in this structure

     <ul id="menu"  class="unstyled accordion collapse in">


                <li id="MenuDash" class="accordion-group">
                    <a data-parent="#menu"
                         data-toggle="collapse" class="accordion-toggle" data-target="#dashboard-nav">
                        <i class="icon-dashboard icon-large"></i> Dashboard <span
                            class="label label-inverse pull-right">2</span>

                    </a>
                    <ul class="collapse" id="dashboard-nav">
                        <li><a href="/Default.aspx"><i class="icon-home"></i> Dash Board</a></li>
                        <li><a href="/Status.aspx"><i class="icon-bar-chart"></i> Status</a></li>
                    </ul>
                </li> </ul>

so the active class is

"active"

and the collapsed in classes are

"collapse in"

i tried this code in default.aspx but it didn't worked

<script type="text/javascript">
   $('#dashboard-nav').removeClass("collapse");
   $('#dashboard-nav').addClass("collapse in");
</script>

Answer 1

as the comments indicated make your class a single word name, also wrap your code to make sure the js is executed after the dom elements are alredy on the page.

in addition instead of removing class adding class try toggle jquery toggle event with something like this ...

$('#dashboard-nav li').toggle(function() {
     alert('First handler for .toggle() called.');
}, function() {
     alert('Second handler for .toggle() called.');
});

Answer 2

On every aspx page use this.

   <script type="text/javascript">
       $(document).ready(function () {
        $('#dashboard-nav').addClass('selected');
        $('.menu li a').hover(function () {
            $('.menu li a').removeClass('selected');
            $(this).addClass('active');
        });
        $('.menu li a').mouseleave(function () {
            $('#dashboard-nav').addClass('selected');
        });
    });
   </script>

and CSS

.menu li a:hover,.menu li a.selected
{
background-color :  #E5E5E5;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
color:Black ! important;
font: normal 12px Trebuchet MS;

}

You can modify according to your requirement