How Can I Add a “Selected” Class Based on URL with

Question

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

Answer 1

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

Answer 2

Sounds like you need to do something like this:

$(".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");  

If all the links have the same two classes (wiki_link and wiki_link_new) you can remove them both at once by doing removeClass("wiki_link wiki_link_new").

Answer 3

Want to see some deep jQuery magic? This will convert your div into a list (jQuery 1.4+) and do the class mangling:

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

Ok, how does this work? It:

• Selects div.wiki;
• Wraps it in a <ul>;
• Selects the children of the <div> (wrap() returns the <div> still *not* the);</li> <li>Unwraps them, meaning the <code>&lt;div&gt; is deleted and the links are children to the</code><ul> now;
• Wraps each link in a <li>;
• Removes all classes from the links;
• Filters down to the link(s) that have a href equalling the relative path of the window location; and
• Adds the selected class to that link.

Edit: Here is a fully working example that I ran locally under http://localhost/test.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $("div.wiki").wrap("<ul>").children("a").unwrap().wrap("<li>").removeAttr("class")
    .filter("[href='" + location.pathname + "']").addClass("selected");
  $("#dump").text($("#content").html());
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="content">
<div class="wiki">
<a href="/one" class="wiki_link">one</a>
<a href="/test.html" class="wiki_link">two</a>
<a href="/three" class="wiki_link wiki_link_new">three</a>
</div>
</div>
<pre id="dump">
</pre>
</body>
</html>

Output:

<ul>
<li><a href="/one">one</a></li>
<li><a class="selected" href="/test.php">two</a></li>
<li><a href="/three">three</a></li>
</ul>

If you want to find out what version of jQuery you have run:

alert($().jquery);

Edit: jQuery 1.3 version:

var wiki = $("div.wiki");
wiki.children("a").wrapAll("<ul>").wrap("<li>").removeAttr("class")
  .filter("[href='" + location.pathname + "']").addClass("selected")
  .end().parent().parent().insertAfter(wiki);
wiki.remove();