单击时如何突出显示侧边栏菜单

时间:2015-07-29 07:00:59

标签: javascript html

我有以下代码:

<div id="sidebar" class="sidebar col-md-3">
<aside class="widget menu">
    <nav>
        <ul>
            <asp:Repeater ID="RepHeading" runat="server" OnItemDataBound="RepHeading_ItemDataBound">
                <ItemTemplate>
                    <asp:Label ID="LblHeadingId" runat="server" Text='<%# Eval("id") %>' Visible="false" />
                    <li class="parent">
                        <a id="anchHeading" runat="server" href="javascript:void(0)">
                            <span id="spanHeading" runat="server" class="open-sub"></span><%# DataBinder.Eval(Container.DataItem, "module") %></a>
                        <ul class="sub">
                            <asp:Repeater ID="RepSubHeading" runat="server">
                                <ItemTemplate>
                                    <li>
                                        <a id="anchSubHeading" runat="server" href='<%# DataBinder.Eval(Container.DataItem, "link") %>'><%# DataBinder.Eval(Container.DataItem, "property") %></a>
                                    </li>
                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </nav>
</aside>
<!-- .menu-->

我想在点击边栏时添加高亮颜色。请告诉我在代码中应该更改什么。

<script>
$(document).ready(function () {
    $('#sidebar ul li ul li').click(function () {
        $('#sidebar ul li ul li').removeClass('active');
        $(this).closest('li').addClass('active');

    });
});

1 个答案:

答案 0 :(得分:0)

你想在&#34; href&#34;的点击事件中突出显示它吗?标签或&#34; li&#34;标签?如果您想在链接上突出显示,请点击试试以下内容。

像这样更新你的sub href标签(只需给你的子链接一个类名)

<a id="anchSubHeading" runat="server" href='<%# DataBinder.Eval(Container.DataItem, "link") %>' class="subLink"><%# DataBinder.Eval(Container.DataItem, "property") %></a>

然后像这样更新您的脚本

$(document).ready(function () {
    $('#sidebar .subLink').click(function () {
        $('#sidebar .subLink').removeClass('active');
        $(this).parent().addClass('active');

    });
});