現在、jQuery を使用して、.com/ の後の URL に基づいて各サイドバー リンクにクラスを適用する、ウィキスペース テーマにリンクのサイドバー リストがあります。以下のコードでこれが適用されているのを見ることができます...
<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>
URLに基づいてjQueryを介して一意のクラスを適用する代わりに、URLを介して検出される「選択済み」のクラスをリンクに追加したいと思います。 たとえば、ユーザーが Geography ページに移動すると、jQuery はその URL が現在表示されているかどうかを検出し、表示されている場合は、「選択された」クラスをサイドバー リンクに適用します。だから、それはこのようになります...
<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>
上記の最初のコード サンプルでは、順序付けられていないリストがあり、リンクのみが含まれていることがわかります。また、2 番目のコード例のように、各リンクをリスト項目に含めて、これらすべてのリンクを順序なしリストにラップする方法も知りたいです。 それは比較的やりやすいですか？
サイドバー用に私が持っている現在の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></li>");
});