Problem with adding css class using Javascript
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=开发者_如何学Python'/']");
}
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!
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>
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.
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.
精彩评论