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

后端未结

关注

 3  1656

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

相关标签:

3条回答

情深已故

2021-01-07 12:08
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>");
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

情歌与酒

2021-01-07 12:15

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><div> 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();

0 讨论(0)

天涯浪人

2021-01-07 12:19

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

0 讨论(0)

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

Adding Class 'Selected' Based on URL

Convert the Links into an UL