如何使用jQuery添加基于URL的“选定”类？

我在我的wikispace主题中有一个侧边栏链接列表，目前使用jQuery根据.com /之后的URL将类应用于每个侧边栏链接。 你可以在下面的代码中看到这个…

Home Calendar Science Language Arts Video Page Code Page Geography Delicious Bookmarks Field Day Share Posts Audio Page Map Page Staff Olympics Scribd Document Staff Meetings Staff Phone Tree Employee Procedures Student Handbook Table Sorter Teachers Tips 

我没有基于URL通过jQuery应用一个唯一的类，而是希望它在链接中添加一个“selected”类，它将通过URL检测到。 例如，如果用户进入Geography页面，jQuery将检测当前是否正在查看该URL，如果是，则将“selected”类应用于侧边栏链接。 所以，它看起来像这样……

 
 
Geography
 
Map Page
 
Staff Olympics
 
Scribd Document
 
Staff Meetings
 
Staff Phone Tree
 
Employee Procedures
 
Student Handbook
 
Table Sorter
 
Teachers Tips
  

在上面提供的第一个代码示例中，您可以看到那里有无序列表，只有链接。 我还想知道如何将所有这些链接包装在无序列表中，每个链接都包含在列表项中，就像在第二个代码示例中一样。 这样做比较容易吗？

我对侧边栏的当前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 = $("
").insertAfter($("div#toc > h1")); $("a[href^=#toc]").each(function () { var b = $("
"), 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("
").find("a").wrap("
"); }); 

Answer 1

在线演示： http ： //jsbin.com/otapo

将test-url粘贴到该演示页面上的文本框中，以查看它选择相应的链接。 将文本框值更改为新的test-url以查看它取消选择任何选定的链接，并选择与提供的URL对应的新链接。

根据URL添加“选定”类

 var loc = window.location.split("/").slice(-1); $("a.selected").removeClass("selected"); $("a[href$='"+loc+"']").addClass("selected"); 

这个特殊的例子需要一些解释。 通常我会改变这个逻辑，并寻找兄弟姐妹，但考虑到你有兴趣在LI中包装每个链接，这些链接将不再是兄弟姐妹。

我可以写这个与每个链接的父LI一起工作，但后来我不确定你是否会立即用父LI测试它，并认为它不起作用。 话虽如此，如果您实施以下解决方案，您可以改进此解决方案。 在目前的状态（不是很漂亮），它将以任何一种方式工作。

将链接转换为UL

 $(".WikiCustomNav").wrapInner("
").find("a").wrap("
"); 

Answer 2

想看一些深度jQuery魔术？ 这会将你的div转换成一个列表（jQuery 1.4+） 并进行类修改：

 $("div.wiki").wrap("
").children("a").unwrap().wrap("
").removeAttr("class") .filter("[href='" + ocation.pathname + "']").addClass("selected"); 

好的，这是如何工作的？ 它：

• 选择div.wiki ;
• 用

  包裹它;

• 选择

  的子);

• Unwraps them, meaning the <div> is deleted and the links are children to the
  （ wrap()返回
  still *not* the

  );

• Unwraps them, meaning the <div> is deleted and the links are children to the
  );
• Unwraps them, meaning the <div> is deleted and the links are children to the
  ;
• 包含

中的每个链接;

• 从链接中删除所有类;
• 过滤到具有等于窗口位置的相对路径的href的链接; 和
• 将selected类添加到该链接。

编辑：这是一个完整的工作示例，我在http://localhosthttps://stackoverflow.com/test.html下本地运行：

         
 
 one two three 
 
 
 
   
 输出： 
 
 
one
 
two
 
three
  
 如果你想找出你运行的jQuery版本： 
 alert($().jquery); 
  编辑： jQuery 1.3版本： 
 var wiki = $("div.wiki"); wiki.children("a").wrapAll("
").wrap("
").removeAttr("class") .filter("[href='" + location.pathname + "']").addClass("selected") .end().parent().parent().insertAfter(wiki); wiki.remove(); 

Answer 3

听起来你需要做这样的事情：

 $(".wiki_link").removeClass("wiki_link"); // remove the css class $(".wiki_link_new").removeClass("wiki_link_new"); // adds the selected class to the link who's href attribute contains // the current relative path. Probably needs tweaking based on querystrings // and whatnot. $(".wiki_link[href~=" + window.location.pathname +"]").addClass("selected"); 

如果所有链接都具有相同的两个类（wiki_link和wiki_link_new），则可以通过执行removeClass("wiki_link wiki_link_new").立即删除它们removeClass("wiki_link wiki_link_new").