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>
}

}

如何将点击的链接保持在下划线上，直到用户点击下一个，然后下一个变为那个，并且上一个进入常规状态。有可能做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>

只保留一个<a href="..."> with a different appearances</a>

1 个答案: