使用Javascript添加css类的问题

Question

我正在使用的Javascript函数是选择多个链接。 这样做是因为我使用带有'^'符号的正则表达式。 我这样做是因为我的链接看起来像这样：

http://localhost/MainApp/User/UserEdit.aspx?id=949abc91-a644-4a02-aebf-96da3ac7d8e1

和location.pathname的值是/ /MainApp/User/UserEdit.aspx所以我认为我只会检查链接的/MainApp/User/UserEdit.aspx ，它会运行良好。

所以我的Javascript函数看起来像这样：

function markActiveLink() {
    var path = location.pathname;
    var links = null;
    if (path) {
        links = $("a[href^='" + path + "']");
    } else {
        links = $("a[href='/']");
    }
    links.parents("li").each(function () {
        $(this).addClass('current').closest('li').addClass('current');
    });
}

这个函数工作得很好，并将css类“current”添加到<li>元素，它的父<li>元素。

问题：我的链接只有结尾。 此功能修剪结尾。 这些链接看起来像这样：

http://localhost//MainApp/User/Order.aspx?id=949abc91-a644-4a02-aebf-96da3ac7d8e1&type=NMO

和http://localhost//MainApp/User/Order.aspx?id=949abc91-a644-4a02-aebf-96da3ac7d8e1&type=MO

因此它们的区别只在于结尾 - > MNO和MO。 当我选择其中一个链接时，我的功能是向他们添加css类。

我尝试过使用document.location.href而不是document.pathname ：

      function markActiveLink() {
var path = document.location.href;        
            var links = null;
            if (path) {
                links = $("a[href='" + path  + "']");
            } else {
                links = $("a[href='/']");
            }
            links.parents("li").each(function () {
                $(this).addClass('current').closest('li').addClass('current');
            });
        }

但是没有选择任何链接。

一些菜单链接的代码如下所示：

<ul>
    <li><a href="<%=System.Configuration.ConfigurationManager.AppSettings("VirtualDirectory").ToString()%>User/UserDetails.aspx?id=<%=pe.UserId%>&from=user">        
        <%=Me.GetLocalResourceObject("CurrentUser.Text")%></a>
        <ul>
            <li><a href="<%=System.Configuration.ConfigurationManager.AppSettings("VirtualDirectory").ToString()%>User/UserDetails.aspx?id=<%=pe.UserId%>&from=user">
                <%=Me.GetLocalResourceObject("CurrentUser.Text")%>
            </a></li>
            <li><a href="<%=System.Configuration.ConfigurationManager.AppSettings("VirtualDirectory").ToString()%>User/UserOrder.aspx?id=<%=pe.UserId%>&type=NMO">
                <%=Me.GetLocalResourceObject("NMOrders.Text")%>
            </a></li>
            <li><a href="<%=System.Configuration.ConfigurationManager.AppSettings("VirtualDirectory").ToString()%>User/UserOrder.aspx?id=<%=pe.UserId%>&type=MO">
                <%=Me.GetLocalResourceObject("MOrders.Text")%>
            </a></li>
            <li><a href="<%=System.Configuration.ConfigurationManager.AppSettings("VirtualDirectory").ToString()%>User/UserPage.aspx?id=<%=pe.UserId%>">
                <%=Me.GetLocalResourceObject("UserPage.Text")%>
            </a></li>
        </ul>   
    </li>
    [...]
</ul>

菜单结构如下所示：

<ul>
    <li><a></a>
        <ul>
            <li><a></a></li>
            ...
            <li><a></a></li>
        <ul>
    </li>
    ...
    </li>
    <li><a></a>
        <ul>
            <li><a></a></li>
            ...
            <li><a></a></li>
        <ul>
    </li>   
</ul>

在页面上这些链接源代码看起来像这样：

<ul>
                <li><a href="/App/User/UserOrder.aspx?id=949abc91-a644-4a02-aebf-96da3ac7d8e1&type=NMO">
                    User Orders NMO
                </a></li>
                <li><a href="/App/User/UserOrder.aspx?id=949abc91-a644-4a02-aebf-96da3ac7d8e1&type=MO">
                    User Orders MO
                </a></li>
                <li><a href="/App/User/UserPage.aspx?id=949abc91-a644-4a02-aebf-96da3ac7d8e1">
                    User Page
                </a></li>
</ul>

任何帮助在这里非常感谢！

Answer 1

试试这个：

 function markActiveLink() {
        $("ul.menu").find("ul").removeClass("current");
        var loc = document.location.href;        
        var $link = null;

        var path = loc.split("?")[1];

        if (path) {
            $link = $('ul.menu li a[href$="' + path  + '"]');
        } else {
            $link = $("ul.menu li a[href$='/']");
        }
        $link.addClass("current");
        $link.parent().addClass("current");
    }

并将你的html菜单改为：

<ul class="menu">
        <li><a href="<%=System.Configuration.ConfigurationManager.AppSettings("VirtualDirectory").ToString()%>User/UserOrder.aspx?id=<%=pe.UserId%>&type=NMO">
            <%=Me.GetLocalResourceObject("NMOrders.Text")%>
        </a></li>
        <li><a href="<%=System.Configuration.ConfigurationManager.AppSettings("VirtualDirectory").ToString()%>User/UserOrder.aspx?id=<%=pe.UserId%>&type=MO">
            <%=Me.GetLocalResourceObject("MOrders.Text")%>
        </a></li>
        <li><a href="<%=System.Configuration.ConfigurationManager.AppSettings("VirtualDirectory").ToString()%>User/UserPage.aspx?id=<%=pe.UserId%>">
            <%=Me.GetLocalResourceObject("UserPage.Text")%>
        </a></li>
    </ul>

Answer 2

尝试这样的功能：

function markActiveLink() {
    var path = location.href.replace(/^.*\/\/[^\/]+/, '');
    var links = null;
    if (path) {
        links = $("a[href='" + path + "']");
    } else {
        links = $("a[href='/']");            
    }
    links.parents("li").each(function () {
        $(this).addClass('current').closest('li').addClass('current');
    });          

}

它应该做的伎俩。

Answer 3

a [href ^ ='“+ path +”']将返回以path值开头的所有节点，如下所示：

http://api.jquery.com/category/selectors/

也许你正在寻找[href $ ='“+ path +”']，因为它会查找href以path结尾的所有节点。

或者只是[href ='“+ path +”']应该只返回一个节点。