2

アクティブな状態を静的な html メニューに改造しようとしています。メニューの構造は次のとおりです。

<div id="navbar">
ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a href="index.htm">Home</a></li>
  <li><a href="about.htm">About Us</a></li>
  <li><a href="products.htm">Products</a>
    <ul>
       <li><a href="product-grp1">Product Groups 1</a>
         <ul>
            <li><a href="product1.htm">Product 1</a>
            <li><a href="product2.htm">Product 2</a>
            <li><a href="product3.htm">Product 3</a>
         </ul>
       </li>
    </ul>
  </li>
</ul>
</div>

これは、実際にメガ メニューとして表示される 3 レベルのメニュー システムであることがわかります。

私がやりたいことは、あなたが見ているページの URL に基づいて、最上位メニューにアクティブな状態を追加することです。このアクティブな状態は、あなたが第 2 レベルのページにいるか第 3 レベルのページにいるかを示す必要があります。サイトには Google から特定のページへの直接リンクが多数あるため、クリックではなくページの URL に基づいてこれを行う必要があるため、それらの場所も示す必要があります。

ファイル構造はフラットなので、各 URL はhttp://www.thesite.com/about.htmなどであることに注意してください。

以前の質問からこれを整理しようとしてきましたが、うまくいきません。それはメニューの深さのせいだと思いますが、誰かが私にできるガイダンスを本当に感謝します.

ご助力いただきありがとうございます。これは本当に私を正しい軌道に乗せました。最後に、私は以下を使用しました： -

/* The following adds active to the next level up of the url */
$('#MenuBar1 li a').each(function() {
 if(filename == $(this).attr('href')) {
      $(this).addClass('active');
 }
});

/* The following line looks for the .active class, then the parent of it with the #navbar ul.... structure, then adds the active class to that one only */
$('.active').parents('#navbar ul.MenuBarHorizontal li').addClass('active-top');
$('#navbar ul.MenuBarHorizontal>li').addClass('menu-top');

これが行うことは、jQuery を使用して .active クラスを特定のリンクに追加し、.active-top を親に追加することです (残念ながら、必要なレベルだけをターゲットにする方法がわかりませんでした)。最後の行は、メニューのトップ レベルに .menu-top クラスを追加します。

この構造により、書式設定が DOM を下って他の子セレクターに流れることなく、メニューのトップ レベルのみをターゲットにすることができます。おそらく最もエレガントなソリューションではありませんが、機能します。

アドバイスをくれた皆さんに改めて感謝します。

4

4 に答える 4

2

を使用して JavaScriptで現在のパスwindow.location.pathnameを取得できます。次のようなものを使用してjQueryで確認できます。

$("#navbar a[href=" + window.location.pathname + "]").addClass('active');

これにより、現在のパスと同じ属性を持つactiveすべてのアンカーにクラスが追加されます。先頭のスラッシュを削除する必要がある場合があります。#navbarhref

于 2013-01-17T05:22:01.490 に答える
1

次のようなことができます。

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

$('#MenuBar1 a').each(function() {
     if(filename == $(this).attr('href')) {
          $(this).addClass('active');
     }
});

li にクラスを適用する必要がある場合は、次のようにします。

var url = window.location.pathname; var ファイル名 = url.substring(url.lastIndexOf('/')+1);

$('#MenuBar1 a').each(function() {
     if(filename == $(this).attr('href')) {
          $(this).parent('li').addClass('active');
     }
});

上記の応答は、完全なパス名を提供するため、正しくないことがわかります。したがって、URL が次のような場合:

http://www.thesite.com/about.htm

「window.location.pathname」はこれを返します:

/about.htm

したがって、マークアップをそのままにして目的の結果を得るには、このようなことを行う必要があります。または、href の前にスラッシュを追加することもできます。

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);

$("#navbar a[href=" + filename + "]").addClass('active');
于 2013-01-17T05:37:58.137 に答える
0

window.location.hrefブラウザの現在の現在の URL の場所を取得するために使用します...そしてaddClass()リンクにクラス名を追加します... inmycase 私は追加していますactive

これを試して

 <script>
 $(function(){
    var currenthref=window.location.href;
    $("#navbar a[href=" + currenthref + "]").addClass('active');  //adds active class to the current url.

})
</script>
于 2013-01-17T05:23:35.553 に答える
0

ここでフィドルをチェックアウトしてください：http://jsfiddle.net/EVmsY/

$(function(){
  var url = 'http://www.thesite.com/product1.htm'; // window.location;
  var page = url.substr(url.lastIndexOf('/') + 1);

  if (page) {
    $('#MenuBar1 li a[href="' + page + '"]').addClass('active');
    $('.active').parents().children('li a').addClass('active');
  }
});
于 2013-01-17T06:00:42.093 に答える