保留只有一个<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>