2

jQuery を使用しており、URL に基づいてメニュー項目にクラスを追加しようとしています。これを試しましたが（他のトピックにあります）、正しく動作しません。現在のページ URL の後のすべてのメニュー項目にクラスを追加します。

これが私のコードです：

<script type='text/javascript'>
  $(document).ready(function(){
    $(function() {
        switch (window.location.pathname) {
            case '/p/about.html':
                    $('.nav-about').addClass('current')
            case '/search/blog':
                    $('.nav-blog').addClass('current')
            case '/p/design.html':
                    $('.nav-design').addClass('current')
            case '/p/photography.html':
                $('.nav-photography').addClass('current')
            case '/p/hosting.html':
                $('.nav-hosting').addClass('current')
        }
      });
  });
</script>

これを修正するための助けはありますか？

ありがとう。

編集: 尋ねる人のために、私は Blogger を使用しています。デフォルトの「Link-List」を使用する代わりに、独自のレスポンシブ メニューを作成しました。ここにはテンプレートが 1 つしかないので、各 HTML ページにクラスを追加できるわけではありません。Blogger は特定のページに特定のクラスを追加しないため、jQuery で行う必要があります。そのため、適切なクラスを適切なメニュー項目に適用するには、URL を取得する必要があります。

4

4 に答える 4

3

検索リンクにクラスを与えて、次のようにすることをお勧めします。

$(document).ready(function(){
   var current = window.location.pathname;
   $('.search-link').each(function(){
      var link = '/' + $(this).attr('href');
      if (current == link){
        $(this).parent().addClass('active');
      }
   }); 
});

これにより、各リンクの href が現在のパス名と比較され、一致する場合はアクティブなクラスが追加されます。リンク変数の「/」は、すでに href にあるかどうかに応じてオプションです。

$(this).parent().addClass('active') は、ブートストラップでうまく機能するパスが一致する場合、アクティブなクラスを親の 'li' 要素に追加しますが、クラスが必要な場所とそれが呼び出されるものは依存しますあなたのCSS。

于 2014-08-14T00:14:03.183 に答える
1

別の提案をします。あなたが与えた例から、URL自体から要素クラスを抽出することは非常に可能です:

var url = window.location.pathname;
var elementName = url.match(/\/(\w+)\.?\/?$/);
$('.nav-' + elementName).addClass('current');

正規表現は次のように一致します。

  1. \/- スラッシュ文字 (エスケープする必要があります)。
  2. (\w+)- 複数の単語文字。これも「キャプチャ」されて返されます。
  3. \.?- リテラルのドット文字 (エスケープする必要もあります)。.phpこれは、や などのファイル拡張子の先頭と一致させるためです.html。疑問符はオプションにします。
  4. \/?- リテラルのスラッシュ文字 (エスケープする必要もあります)。これは、URL の like の末尾のスラッシュと一致させるためのもの/members/です。疑問符はオプションにします。
  5. $- 文字列の末尾に一致します。

nav 要素の完全なクラス名は、.nav-と の連結から作成され、正規表現から一致して取得されたものです。

URL のフォーマットに大きく依存しますが、URL の例では問題なく動作します。このコードを使用すると、DRY の考え方 (同じことを繰り返さないでください) によって本当に可能になります。

于 2013-05-01T22:02:57.867 に答える