Question

Javascript function wchich I am using is selecting more than one link. It is doing that because I used Regular expression with ‘^’ symbol. I have done it this way because my links looks like that:

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

and value of location.pathname is /MainApp/User/UserEdit.aspx
And so I thought that I will check only begining of link and it will work well.

So my Javascript function looks like that:

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');
    });
}

This function is working quite well and adding css class “current” to <li> elements and it’s parent <li> element.

Problem: I have also links that differ only by the ending. And this function trims endings. Those links looks like that:

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

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

So they differ only by the ending -> MNO and MO. And when I am selecting one of this links my function is adding css class to them both.

I have tried using document.location.href instead of document.pathname like that:

      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');
            });
        }

But then none of links were selected.

Code of some of menu links look like:

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

Menu structure looks like that:

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

And on page those links source code looks like that:

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

Any help here much appreciated!

Answer 1

Try function like that:

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');
    });          

}

It should do the trick.