Question

我的网站上有一个自举侧导航栏设置。我想通过维护活动的css属性向用户显示已选择的tabe。这是侧导航栏的样子：

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

我正在尝试应用CSS样式：

        li .activeBtn {
        cursor: pointer;
    }
    .activeBtn.active {
        color: purple;
        border-bottom: solid;
    }

单击LinkButton时，我想将LinkButton更改为活动状态，并将所有其他按钮重置为不活动状态。这是我在MasterPage中执行的jQuery函数：

$(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");
          });
          });

代码在此jsFiddle中正常运行。我相信它不起作用的原因是因为我的页面上有多视图。单击LinkButton时，我在多视图中更改视图。

为什么这不会像jsFiddle一样有效？

Answer 1

试试这个https://jsfiddle.net/hwcgynr0/4/
将类添加到单击的元素，然后找到兄弟姐妹并删除他们的活动类

$(function () {
    $('body').on('click', '.activeBtn', function () {
        $(this).addClass('active').closest('li').siblings().children().removeClass('active');
    });
});

使用Javascript在导航栏中显示当前选项卡

1 个答案: