0

我有一个导航菜单作为 ASP.NET 网络表单用户控件 (ASCX)。每个菜单项都可以根据控件呈现的页面变为活动状态。活动状态应该用一个名为“ active”的附加 CSS 类来表示。true通过设置为以下属性之一，可以从代码隐藏文件控制要激活的项目：IsMenuItem1Active或IsMenuItem2Active.

现在我的问题是：如何根据 set 属性修改CssClass视图内相应菜单项的属性，而无需在代码隐藏中执行任何其他逻辑？

<div class="menu">
    <asp:HyperLink runat="server" ID="MenuItem1" CssClass="menu-item" NavigateUrl="~/">Menu item 1</asp:HyperLink>
    <asp:HyperLink runat="server" ID="MenuItem2" CssClass="menu-item" NavigateUrl="~/">Menu item 1</asp:HyperLink>
</div>
4

3 回答 3

0

我会建议两种方法来做到这一点。一种方法是使用 javascript。第二种方法是使用 asp.net 生命周期钩子函数进行特定控件。

第一个选项： 根据this，您可以使用以下方法将 css 类添加到特定元素：

document.getElementById("MyElement").className += " MyClass";

此调用应在onLoad创建 HTML DOM 之前调用的函数中进行。

第二种选择： 根据这篇描述 ASP.NET 生命周期的文章，您可以使用该PreRender函数来添加 css 类。

希望我有所帮助！

于 2013-11-14T20:52:27.187 回答
0

保持设计和逻辑的分离，最好从后面的代码中控制 CssClass 的值。您需要进行的任何设计更改都可以通过active您添加的类名表示的 CSS 来完成。

如果您绝对必须在视图中执行此操作，那么您可以使用一些 JavaScript：

<script>
var c = '<%= IsMenuItem1Active ? "menu-item active" : "menu-item" %>'
document.getElementById('<%= MenuItem1.ClientID %>').setAttribute('class', c);
</script>
于 2013-11-14T20:41:08.040 回答
0

请尝试以下代码：

            <div class="menu">
                <asp:HyperLink runat="server" ID="MenuItem1" CssClass="menu-item" NavigateUrl="~/">Menu item 1</asp:HyperLink>
                <asp:HyperLink runat="server" ID="MenuItem2" CssClass="menu-item" NavigateUrl="~/">Menu item 1</asp:HyperLink>
            </div>
            <%-- Change css here--%>
            <script type="text/javascript">
            <%if (IsMenuItem1Active == true)
             {%>
                document.getElementById("<%=MenuItem1.ClientID%>").className += " active";
           <%}
            else if (IsMenuItem2Active == true)
            {%>
                document.getElementById("<%=MenuItem2.ClientID%>").className += " active";
           <%}%>
            </script>
于 2013-11-14T20:41:40.863 回答