单击时保持 LinkBut​​ton 活动

Question

我在页面顶部的导航栏中有几个 LinkButtons 使用 Bootstrap。当用户单击 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

这里有一个 javascript 用于将 active class 绑定到您的导航栏链接，如此处所示 jsfiddle

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