如何添加“选定的”类基于URL的jQuery？ [英] How Can I Add a "Selected" Class Based on URL with jQuery?
问题描述
我有一个侧边栏列表的链接在我的wikispace主题，目前使用jQuery基于.com /后的URL应用一个类到每个侧边栏链接。您可以在下面的代码中看到这一点。
< div class =WikiCustomNav WikiElement wiki> ; a href =/class =>首页< / a>
< a href =/ Calendarclass =calendar>日历< / a>
< a href =/ Scienceclass =science>科学< / a>
< a href =/ Language + Artsclass =language-arts>语言艺术< / a>
< a href =/ Video + Pageclass =video-page>视频页< / a>
< a href =/ Code + Pageclass =code-page>代码页< / a>
< a href =/ Geographyclass =geography>地理< / a>
< a href =/ Western + Dayclass =western-day>美味书签< / a>
< a href =/ Field + Dayclass =field-day>字段日< / a>
< a href =/ Share + Postsclass =share-posts>分享讯息< / a>
< a href =/ Audio + Pageclass =audio-page>音频页面< / a>
< a href =/ Map + Pageclass =map-page>地图页< / a>
< a href =/ Staff + Olympicsclass =staff-olympics>职业奥林匹克< / a>
< a href =/ Scribd + Documentclass =scribd-document> Scribd文档< / a>
< a href =/ Staff + Meetingsclass =staff-meetings>职员会议< / a>
< a href =/ Staff + Phone + Treeclass =staff-phone>职员电话树< / a>
< a href =/ Employee + Proceduresclass =employee-procedures> Employee Procedures< / a>
< a href =/ Student + Handbookclass =student-handbook>学生手册< / a>
< a href =/ Table + Sorterclass =table-sorter>表排序器< / a>
< a href =/ Teachers + Tipsclass =teachers-tips>教师提示< / a>
我不想通过基于URL的jQuery应用一个唯一的类，它会为链接添加一个已选择类别，这将通过网址检测。例如，如果用户转到地理位置页面，jQuery将检测该网址当前是否正在查看，如果因此，它会将选定的类应用于侧边栏链接。所以，它看起来像这样...
< ul>
< li>< a href =/ Geographyclass =selected>地理< / a>< / li>
< li>< a href =/ Map + Page>地图页< / a>< / li>
< li>< a href =/ Staff + Olympics>职业奥林匹克< / a>< / li>
< li>< a href =/ Scribd + Document> Scribd文档< / a>< / li>
< li>< a href =/ Staff + Meetings>员工会议< / a>< / li>
< li>< a href =/ Staff + Phone + Tree>职员电话树< / a>< / li&
< li>< a href =/ Employee + Procedures>员工流程< / a>< / li>
< li>< a href =/ Student + Handbook>学生手册< / a>< / li>
< li>< a href =/ Table + Sorter>表格排序器< / a>< / li>
< li>< a href =/ Teachers + Tips>教师提示< / a>< / li>
< / ul>
在上面提供的第一个代码示例中，您可以看到有无序列表有，只有链接。我还想知道如何在无序列表中包装所有这些链接，每个链接都包含在列表项中，如第二个代码示例所示。这是相对容易做到的吗？
我现在的侧边栏jQuery代码如下：
jQuery（＃sidebar br）。remove（）;
jQuery（。wiki_link，.wiki_link_new）。attr（'class'，''）each（function（）{
var className = jQuery（this）.attr（'href'）。 substr（1）.toLowerCase（）。split（'+'）。slice（0,2）.join（' - '）;
jQuery（this）.addClass（className）;
} ;感谢您的帮助！
> 这里的代码现在产生的注释中提到的冲突... jQuery #sidebar br）。remove（）;
jQuery（。wiki_link，.wiki_link_new）。attr（class，）.each（function（）{
var a = jQuery（this）.attr（href）。 substr（1）.toLowerCase（）。split（+）。slice（0，2）.join（ - ）;
jQuery（this）.addClass（a）
}
var $ ul = $（< ul>< / ul>）。insertAfter（$（div＃toc> h1））;
$（a [href ^ =＃toc]）。each（function（）{
var b = $（< li>< / li>），
a = $（this）.parent（）;
b.append（this）;
a.remove（）;
$ ul.append（b）
}
var loc = window.location.split（/）。slice（-1）;
jQuery（a.selected）。removeClass（selected）;
jQuery（a [href $ ='+ loc +']）。addClass（selected）;
jQuery（。WikiCustomNav）。wrapInner（< ul>< / ul>）。find（a）。wrap（< li><
}）;
解决方案在线演示： http://jsbin.com/otapo
将测试网址粘贴到文本框中在该演示页面上看到它选择相应的链接。
添加类Selected（选择）基于URL
var loc = window.location.split（/）。
$（a.selected）。removeClass（selected）;
$（a [href $ ='+ loc +']）。addClass（selected）;
这里的特定示例需要一些解释。通常我会改变这个逻辑，并寻找兄弟姐妹，但考虑到你有兴趣将每个链接包装在一个LI中，这些链接将不再是兄弟姐妹了。
我可以写这个工作与每个链接的父LI，但是我不知道你是否会立即与父LI的测试，并认为它不工作。也就是说，如果实现以下解决方案，您可以改进此解决方案。
将链接转换为UL
$（。WikiCustomNav）。wrapInner（< ul>< / ul>）。find（a）。wrap（< li> / li>）;
I have a sidebar list of links in my wikispace theme that currently uses jQuery to apply a class to each of the sidebar links based on the URL after the .com/. You can see this being applied in the code below...
<div class="WikiCustomNav WikiElement wiki"><a href="/" class="">Home</a>
<a href="/Calendar" class="calendar">Calendar</a>
<a href="/Science" class="science">Science</a>
<a href="/Language+Arts" class="language-arts">Language Arts</a>
<a href="/Video+Page" class="video-page">Video Page</a>
<a href="/Code+Page" class="code-page">Code Page</a>
<a href="/Geography" class="geography">Geography</a>
<a href="/Western+Day" class="western-day">Delicious Bookmarks</a>
<a href="/Field+Day" class="field-day">Field Day</a>
<a href="/Share+Posts" class="share-posts">Share Posts</a>
<a href="/Audio+Page" class="audio-page">Audio Page</a>
<a href="/Map+Page" class="map-page">Map Page</a>
<a href="/Staff+Olympics" class="staff-olympics">Staff Olympics</a>
<a href="/Scribd+Document" class="scribd-document">Scribd Document</a>
<a href="/Staff+Meetings" class="staff-meetings">Staff Meetings</a>
<a href="/Staff+Phone+Tree" class="staff-phone">Staff Phone Tree</a>
<a href="/Employee+Procedures" class="employee-procedures">Employee Procedures</a>
<a href="/Student+Handbook" class="student-handbook">Student Handbook</a>
<a href="/Table+Sorter" class="table-sorter">Table Sorter</a>
<a href="/Teachers+Tips" class="teachers-tips">Teachers Tips</a>
Instead of applying a unique class via jQuery based on the URL, I would like to have it add a class of "selected" to the link, which would be detected via the URL. For example, if the user goes to the Geography page, the jQuery would detect whether that URL was currently being viewed, and if so, it would apply the "selected" class to the sidebar link. So, it would look like this...
<ul>
<li><a href="/Geography" class="selected">Geography</a></li>
<li><a href="/Map+Page">Map Page</a></li>
<li><a href="/Staff+Olympics">Staff Olympics</a></li>
<li><a href="/Scribd+Document">Scribd Document</a></li>
<li><a href="/Staff+Meetings">Staff Meetings</a></li>
<li><a href="/Staff+Phone+Tree">Staff Phone Tree</a></li>
<li><a href="/Employee+Procedures">Employee Procedures</a></li>
<li><a href="/Student+Handbook">Student Handbook</a></li>
<li><a href="/Table+Sorter">Table Sorter</a></li>
<li><a href="/Teachers+Tips">Teachers Tips</a></li>
</ul>
In the first code sample I provided above, you can see that there is unordered list in there, only links. I would also like to know how I could wrap all of those links in an unordered list, with each link included within a list item, like in the second code example. Is that relatively easy to do?
The current jQuery code I have for the sidebar is here below...
jQuery("#sidebar br").remove();
jQuery(".wiki_link, .wiki_link_new").attr('class','').each(function(){
var className = jQuery(this).attr('href').substr(1).toLowerCase().split('+').slice(0,2).join('-');
jQuery(this).addClass(className);
});
Thanks for your help on this!
Here's the code that is now producing a conflict mentioned within the comments...
jQuery("#sidebar br").remove();
jQuery(".wiki_link, .wiki_link_new").attr("class", "").each(function () {
var a = jQuery(this).attr("href").substr(1).toLowerCase().split("+").slice(0, 2).join("-");
jQuery(this).addClass(a)
});
var $ul = $("<ul></ul>").insertAfter($("div#toc > h1"));
$("a[href^=#toc]").each(function () {
var b = $("<li></li>"),
a = $(this).parent();
b.append(this);
a.remove();
$ul.append(b)
});
var loc = window.location.split("/").slice(-1);
jQuery("a.selected").removeClass("selected");
jQuery("a[href$='" + loc + "']").addClass("selected");
jQuery(".WikiCustomNav").wrapInner("<ul></ul>").find("a").wrap("<li></li>");
});
解决方案 Online demo: http://jsbin.com/otapo
Paste a test-url into the textbox on that demo page to see it select the corresponding link. Change the textbox value to a new test-url to see it deselect any selected links, and select the new link that corresponds to the url provided.
Adding Class 'Selected' Based on URL
var loc = window.location.split("/").slice(-1);
$("a.selected").removeClass("selected");
$("a[href$='"+loc+"']").addClass("selected");
This particular example here requires some explaining. Normally I would change this logic, and look for siblings, but considering the fact that you're interested in wrapping each link in an LI, these links wouldn't be siblings anymore.
I could write this to work with parent LI's around each link, but then I'm not sure if you would test it immediately with parent LI's, and think that it doesn't work. That being said, if you implement the following solution, you could improve this solution. In its current state (not very pretty), it will work either way.
Convert the Links into an UL
$(".WikiCustomNav").wrapInner("<ul></ul>").find("a").wrap("<li></li>");
这篇关于如何添加“选定的”类基于URL的jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
