jquery - 使用 jquery 更改母版页元素的 css

Question

当我在任何子链接页面上时，我想突出显示主菜单。

为此，我试图从内容页面将 css 应用于母版页中的主菜单链接。

菜单代码如下：

 <div class="menu">
                 <ul id="vertical-navigation">
                    <li runat="server" id="liConfiguration" class="main_link"><a href="#">Configuration</a>
                        <ul>
                            <li class="">
                                <div class="ParentMenu">
                                    <div class="ChildItem">
                                        <asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/xyz/xyz.aspx">xyz Master</asp:HyperLink></div>
                                    <iframe src="" class="IframeMenuItem" scrolling="no"></iframe>
                                </div>
                            </li>

因此，在这种情况下，当我转到 xyz.aspx 时，我想将“liConfiguration”的 css 更改为“active_butn”

我想编写用于更改 css 的 jquery 函数...我该怎么做？

Answer 1

尽管您要求提供 jquery 代码（对此有 2 个答案），但我认为这里的服务器代码可能会更好。当您可能想要更改元素 id 时会更安全。

在大师：

public void ChangeConfigurationElementClass(string className)
{
    liConfiguration.Attributes["class"] = className;
}

在页面中：

var master = Master as MyMaster;

if (master != null)
    master.ChangeConfigurationElementClass("active_butn");

Answer 2

var $path = window.location.pathname;

var $indexPath = function ($path) {

            if ($path.indexOf('xyz') > -1) {
                $('#liConfiguration').addClass("active_butn");
            }
            else {
                $('#liConfiguration').addClass("main_link");
            }
}

我希望添加新类 $indexPath($path); 会很好