Problem with adding css class using Javascript

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!

Evan · Accepted Answer · 2011-08-04 17:37:08Z

4

try this:

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

and change ur html for ur menu to:

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

edited Aug 4, 2011 at 17:37

answered Aug 4, 2011 at 13:50

Evan

6,1139 gold badges36 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Marta Over a year ago

I have written code here wrong - I already tried with var path = document.location.href; and then none of links are selected. I am using function: document.write(document.location.href) to check values and it matches my links.

Evan Over a year ago

well i guess the code you have up there is a bit confusing in that case, but so what you are trying to do is be able to select the links different depending on whether they are MNO or MO right?? in this case, just use the "ends with" regex for selectors i.e. a[href$="NMO"] or a[href$="MO"]

Marta Over a year ago

Yes. I have a menu with links. And some of those links differ only by ending. And I want to have selected only one item from menu. I want to select link on menu to current page, so that user would know where he is.

Evan Over a year ago

ok so I'm not sure why you using an each function? ideally you will be selecting only one <li><a href></a></li> element correct? so would this work? : $('li a[href="' + document.location.href + '"]').addClass("current");

Marta Over a year ago

I am not good at Javascript and i am not sure why I am using an each function either. And yes I want to select only one <li> element, oh and also it's parent <li> to mark all path.

|

Marta · Accepted Answer · 2011-08-04 18:41:27Z

0

+50

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.

answered Aug 4, 2011 at 18:41

Marta

2,98713 gold badges47 silver badges69 bronze badges

1 Comment

Marta Over a year ago

It works great! I used 'var path = location.pathname + location.search + location.hash;' but idea is similar.

memical · Accepted Answer · 2011-08-09 12:48:28Z

0

a[href^='" + path + "'] will return all the nodes that start with the value of path, as documented here:

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

maybe using a[href$='" + path + "'] is what you are looking for since it looks for all nodes having href ending with path.

or just a[href='" + path + "'] should return only one node.

answered Aug 9, 2011 at 12:48

memical

2,5612 gold badges27 silver badges41 bronze badges

1 Comment

Marta Over a year ago

I have already tried thinks like that. When I used a[href^='" + path + "'] it was selecting more than one menu item. And when I was using a[href='" + path + "'] it was not selecting complicated links.

Collectives™ on Stack Overflow

Problem with adding css class using Javascript

3 Answers 3

17 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

17 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest