I have set up a bootstrap side navbar on my website. I am looking to indicate to the user which tab has been selected by maintaining the active css property. Here is what the side navbar code looks like:
<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" CssClass="activeBtn active" runat="server" OnClick="LB_MainPage_Click">Ticket Books Home</asp:LinkButton>
</li>
<li >
<asp:LinkButton ID="LB_IssueTicket" CssClass="activeBtn" runat="server" OnClick="LB_IssueTicket_Click">Issue Ticket Book</asp:LinkButton>
</li>
<li >
<asp:LinkButton ID="LB_Change_TicketBooks" CssClass="activeBtn" runat="server" OnClick="LB_Change_TicketBooks_Click" >Change Ticket Books</asp:LinkButton>
</li>
<li >
<asp:LinkButton ID="LB_TicketBook_Reports" CssClass="activeBtn" runat="server" OnClick="LB_TicketBook_Reports_Click">Search Ticket Books</asp:LinkButton>
</li>
<li >
<asp:LinkButton ID="LB_MissingTickets" CssClass="activeBtn" runat="server" OnClick="LB_MissingTickets_Click">Custom Reports</asp:LinkButton>
</li>
<li >
<asp:LinkButton ID="LB_AddVoidTicket" CssClass="activeBtn" runat="server" OnClick="LB_AddVoidTicket_Click" >Add Void Ticket</asp:LinkButton>
</li>
<li >
<asp:LinkButton ID="LB_VoidTickets" CssClass="activeBtn" runat="server" OnClick="LB_VoidTickets_Click" >Void Tickets</asp:LinkButton>
</li>
</ul>
</div>
I aim to implement the CSS styling as follows:
li .activeBtn {
cursor: pointer;
}
.activeBtn.active {
color: purple;
border-bottom: solid;
}
Upon clicking a LinkButton, I want to mark that button as active and reset all other buttons to inactive. For this, I have included the following jQuery function in my MasterPage:
$(function () {
$(".activeBtn").click(function () {
// remove classes from all
$(".activeBtn").removeClass("active");
// add class to the one we clicked
$(this).addClass("active");
console.log("this is a test log");
});
});
The code works correctly in this jsFiddle. However, it seems to not work properly due to the presence of a multi-view on my page. When a LinkButton is clicked, I switch views within the multi-view.
Any insights on why this behavior differs from the jsFiddle example provided?