Jak mogę dodać klasę „Wybrane” na podstawie adresu URL za pomocą jQuery?

Mam listę pasków bocznych w moim motywie wikispace, które obecnie używa jQuery, aby zastosować klasę do każdego linku na pasku bocznym na podstawie adresu URL po .com /. Możesz to zobaczyć w poniższym kodzie ...

<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>

Zamiast stosować unikalną klasę za pośrednictwem jQuery opartą na adresie URL, chciałbym, aby dodała klasę „wybrana” do łącza, która byłaby wykrywana za pośrednictwem adresu URL. Na przykład, jeśli użytkownik przejdzie do strony Geografia, jQuery wykryłoby, czy ten adres URL był aktualnie oglądany, a jeśli tak, zastosowałaby „wybraną” klasę do łącza na pasku bocznym. Wyglądałoby to tak ...

<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>

W pierwszej próbce kodu podanej powyżej, możesz zobaczyć, że jest tam lista nieuporządkowana, tylko linki. Chciałbym również wiedzieć, jak mogę zawinąć wszystkie te linki na nieuporządkowanej liście, z każdym linkiem zawartym w elemencie listy, jak w drugim przykładzie kodu. Czy to stosunkowo łatwe?

Aktualny kod jQuery, który mam dla paska bocznego, jest tutaj poniżej ...

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

Dziękujemy za pomoc w tej sprawie!

Oto kod, który powoduje konflikt wymieniony w komentarzach ...

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

questionAnswers(3)

yourAnswerToTheQuestion