单击时保持 LinkBut​​ton 处于活动状态

Question

我使用 Bootstrap 在页面顶部的导航栏中有一对 LinkButtons。当用户单击LinkButton 时，我希望LinkButton 在用户停留在该页面或导航到新页面时保持活动状态。这是我的navbar 的样子：

   <div style="font-size: 80%; background-color: #ffffff; width: 15%;" class="col-xs-6 col-sm-3 sidebar-offcanvas">
    <ul class="nav">
        <li>
            <asp:LinkButton ID="LB_MainPage" runat="server" OnClick="LB_MainPage_Click">Ticket Books Home</asp:LinkButton>
        </li>
        <li>
            <asp:LinkButton ID="LB_IssueTicket" runat="server" OnClick="LB_IssueTicket_Click">Issue Ticket Book</asp:LinkButton>
        </li>
        <li>
            <asp:LinkButton ID="LB_Change_TicketBooks" runat="server" OnClick="LB_Change_TicketBooks_Click" >Change Ticket Books</asp:LinkButton>
        </li>
        <li>
            <asp:LinkButton ID="LB_TicketBook_Reports" runat="server" OnClick="LB_TicketBook_Reports_Click">Search Ticket Books</asp:LinkButton>
        </li>
        <li>
            <asp:LinkButton ID="LB_MissingTickets" runat="server" OnClick="LB_MissingTickets_Click">Custom Reports</asp:LinkButton>
        </li>
        <li>
            <asp:LinkButton ID="LB_AddVoidTicket" runat="server" OnClick="LB_AddVoidTicket_Click" >Add Void Ticket</asp:LinkButton>
        </li>
        <li>
            <asp:LinkButton ID="LB_VoidTickets" runat="server" OnClick="LB_VoidTickets_Click" >Void Tickets</asp:LinkButton>
        </li>
    </ul>
</div> 

我正在尝试使用此 CSS 代码设置列表样式：

a:hover{
        border-bottom: solid;
        border-bottom-color: purple;
    }
    a:active{
        color: purple;
        border-bottom: solid;
    }

悬停样式效果很好，活动样式也是如此，但是当我释放鼠标按钮时，活动样式不会保留。我怎样才能解决这个问题？如果可能的话，我想在代码后面 (C#) 或 CSS 中执行此操作。

这是我项目的 JSFiddle：

https://jsfiddle.net/hwcgynr0/

Answer 1

这是一个将active 类绑定到您的导航栏链接的javascript，如此处所示jsfiddle

$(function () {
            $(".activeBtn").click(function () {
                // remove classes from all
                $(".activeBtn").removeClass("active");
                // add class to the one we clicked
                $(this).addClass("active");
            });
});