Question

this is probably a simplistic question and I had tried to solve it my best provided I am not that versatile in CSS, so the task at hand is to keep the state of a clicked link on the tree link view.

Here is the code to generate the html:

  @helper NavigationTree(SiteMapNodeCollection childrenOf, SiteMapNode root) {

     if(root.ParentNode == null && root != null && childrenOf == null) { 
      //check if it's the root and dont bother doing the itteration, just make a     recursive call.
    <ul id="navigationTree">
        <li class="first">
            <a href="@root.Url" class="current">@root.Title</a>   
            @NavigationTree(root.ChildNodes, root)
        </li>
    </ul>
} else { //if not the root, take it and go one level down for each children node        using     recursion.
    <ul>
        @foreach(SiteMapNode node in childrenOf) {
            <li>

                   <a href="@node.Url" class="masterRecord">@node.Title</a> 


                @if (@node.ParentNode.Key == @root.Key)
                {  
                    @NavigationTree(node.ChildNodes, node)
                }       
            </li> //close the <li>
        }
    </ul> //close the <ul>
}

}

How do I keep the clicked link on the menue underlined untill the user clicks the next then the next one becomes that and the prev one goes to the regular state. Is it possible to do throgh CSS or jQuery is a must?

Mecri!

HTML

  <div id="categories">
            <ul id="navigationTree">
             <li class="first">
                 <a href="/Home/Index" class="current">Application Administration</a>   
                        <ul>
                          <li>

                            <a href="/Home/MasterRecords" class="masterRecord">Master Files</a> 


                        <ul>
                          <li>

                            <a href="/Application/Index" class="masterRecord">Application Master</a> 


                     <ul>
                       <li>

                         <a href="/Application/Create" class="masterRecord">Create New</a> 


                    <ul>
                   </ul>                 
               </li>                 
               <li>

                   <a href="/Application/Details" class="masterRecord">View</a> 


              <ul>
                </ul>                 </li>         </ul>                 </li>                 <li>

                   <a href="/Facility/Index" class="masterRecord">Facility Master</a> 


    <ul>
            <li>

                   <a href="/Facility/Create" class="masterRecord">Create New</a> 


    <ul>
    </ul>                 </li>                 <li>

                   <a href="/Facility/Details" class="masterRecord">View</a> 


    <ul>
    </ul>                 </li>         </ul>                 </li>                 <li>

                   <a href="/Department/Index" class="masterRecord">Department Master</a> 


    <ul>
            <li>

                   <a href="/Department/Create" class="masterRecord">Create New</a> 


    <ul>
    </ul>                 </li>                 <li>

                   <a href="/Department/Details" class="masterRecord">View</a> 


    <ul>
    </ul>                 </li>         </ul>                 </li>                 <li>

                   <a href="/JobCode/Index" class="masterRecord">Job Code Master</a> 


    <ul>
            <li>

                   <a href="/JobCode/Create" class="masterRecord">Create New</a> 


    <ul>
    </ul>                 </li>                 <li>

                   <a href="/JobCode/Details" class="masterRecord">View</a> 


    <ul>
    </ul>                 </li>         </ul>                 </li>                 <li>

                   <a href="/EmployeeLevel/Index" class="masterRecord">Employee Level Master</a> 


    <ul>
            <li>

                   <a href="/EmployeeLevel/Create" class="masterRecord">Create New</a> 


    <ul>
    </ul>                 </li>                 <li>

                   <a href="/EmployeeLevel/Details" class="masterRecord">View</a> 


    <ul>
    </ul>                 </li>         </ul>                 </li>                 <li>

                   <a href="/EmployeeType/Index" class="masterRecord">Employee Type Master</a> 


    <ul>
            <li>

                   <a href="/EmployeeType/Create" class="masterRecord">Create New</a> 


    <ul>
    </ul>                 </li>                 <li>

                   <a href="/EmployeeType/Details" class="masterRecord">View</a> 


    <ul>
    </ul>                 </li>         </ul>                 </li>         </ul>                 </li>                 <li>

                   <a href="/Role/Index" class="masterRecord">Role Management</a> 


    <ul>
            <li>

                   <a href="/Role/Create" class="masterRecord">Create</a> 


    <ul>
    </ul>                 </li>                 <li>

                   <a href="/Role/Search" class="masterRecord">Search</a> 


    <ul>
    </ul>                 </li>                 <li>

                   <a href="/Role/Assign" class="masterRecord">Assign Applications to Roles</a> 


    <ul>
    </ul>                 </li>         </ul>                 </li>         </ul> 
        </li>
    </ul>

Answer 1

try something like this. it uses css and jquery

<script type='text/javascript'>

    $('.masterRecord').click(function(){
           $('.masterRecord').css('border','none');
           $(this).css('border-bottom','1px solid #F00');
        }
    });

</script>