单击时保持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");
            });
});