この jQuery 正規表現は、stackoverflow の別のスレッドから取得しました。URL に基づいて現在のメニュー項目に css クラスを追加します。次のようになります。
<script>
$(function () {
// show current menu object highlighted
var url = window.location.pathname,
urlRegExp = new RegExp(url == '/' ? window.location.origin + '/?$' : url.replace(/\/$/, '')); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
// now grab every link from the navigation
$('nav a').each(function () {
// and test its href against the url pathname regexp
if (urlRegExp.test(this.href)) {
$(this).addClass('current');
}
console.log(url);
console.log($(this).attr('href'));
});
});
</script>
パスがリンクの href とまったく同じであれば、これはうまく機能しますが、これを現在のメニュー オブジェクトのサブページにも適用したいと考えています。これは私のナビゲーションです:
<nav>
<ul>
<li>
<a href="/Admin/Blogs" title="Blog" style="border-left: 1px solid rgba(0,0,0,.15);">Blog</a>
</li><li>
<a href="/Admin/Shows" title="Shows">Shows</a>
</li><li>
<a href="/Admin/StoreItems" title="Store">Store</a>
</li><li>
<a href="/Admin/Pages" title="Pages">Pages</a>
</li><li>
<a href="/Admin/Menu" title="Menu">Menu</a>
</li><li>
<a href="/Admin/SocialMedia" title="Social media">Social media</a>
</li><li>
<a href="/Admin/ImageGallery" title="Image gallery">Image gallery</a>
</li><li>
<a href="/Admin/MailSettings" title="Mail settings">Mail settings</a>
</li><li>
<a href="/Admin/PageSettings" title="Site configuration">Site configuration</a>
</li>
</ul>
</nav>
パスが /Admin/Blogs/Create だとしましょう。Blog メニュー項目を強調表示したいと思います。現時点ではそうではありません。また、/Admin (つまり、ホームページ) に移動すると、その時点ですべてのメニュー項目が選択されますが、これは望ましくありません。
いつの日か正規表現を適切に学習するために時間をかける必要がありますが、これ(学校のプロジェクト)で少し急いでいるので、誰かが私を助けてくれれば大歓迎です。