我正在使用的 Javascript 函数是选择多个链接。这样做是因为我使用了带有“^”符号的正则表达式。我这样做是因为我的链接看起来像这样:
http://localhost/MainApp/User/UserEdit.aspx?id=949abc91-a644-4a02-aebf-96da3ac7d8e1
location.pathname 的值为/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>
元素。
问题:我也有仅结尾不同的链接。这个功能 trim 结局。这些链接看起来像这样:
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>
非常感谢这里的任何帮助!
最佳答案
试试这个:
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>
关于javascript - 使用 Javascript 添加 css 类的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6942021/