保留只有一個<a href=...>與不同的外觀

Question

這可能是一個簡單的問題，我試圖解決它我最好提供我不是在CSS多功能，所以手頭的任務是保持點擊鏈接的狀態樹鏈接視圖。

這裏是生成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> 
} 

}

如何保持對menue被點擊鏈接下劃線，直到用戶點擊下一步，然後下一個變成和先行者進入正常狀態。是否有可能做throgh CSS或jQuery是必須的？

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

嘗試這樣的事情。它使用css和jquery

<script type='text/javascript'> 

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

</script>