0

Web サイトのすべてのページに共通するすべてのメニュー項目を 1 つのヘッダー ファイルにまとめたいと考えています。問題は、現在のメニュー項目のクラスを定義して色を変える必要があることです。私はメニューにスーパーフィッシュを使用しています。これは非常にシンプルなモックアップです...

<nav> 
  <ul class="sf-menu">
     <li id="first-li"><a href="index.php">Home</a></li>
      <li class="current"><a href="page1.php">Page 1</a>
         <ul>
             <li><a href="submenu1.php">Submenu 1</a> </li>
             <li><a href="submenu2.php">Submenu 2</a> 
                 <ul>
                 <li><a href="subsubmenu1.php">SUBSubmenu 1</a> </li>
                 </ul>
             </li>
          </ul>

      </li>
      <li><a href="page2.php">Page 2</a> </li>
       <li><a href="page3.php">Page 3</a></li> 
       <li><a href="page4.php">Page 4</a></li>
   </ul>
 </nav>

class="current" を削除し、ナビゲーション全体をヘッダー ファイルに移動してから、各ページで現在のクラスのみを指定することは可能ですか?

私の実際のメニュー コードははるかに大きいので、すべてのページで繰り返したくないのです。

4

4 に答える 4

0

すべての回答を少し組み合わせることで、思いどおりに機能するようになりました。

最初に、ハイライトしたいすべての第 1 層のメニュー項目に ID を指定し、次に各ページで現在のクラスを次のように移動します...

<script>
$(document).ready(function() {
$( ".sf-menu li" ).removeClass("current");
$( "#menu2" ).addClass("current");  
}); 
</script>

クリーンでシンプル、クリックしなくても機能します。回答してくれたすべての人に感謝します。

于 2013-04-06T12:48:38.317 に答える
0

これを現在のページスクリプトで使用します

事のためにjqueryを使用してください..

$('.sf-menu li a').click(function() {
        $('.sf-menu li.current').removeClass('current');
        $(this).closest('li').addClass('current');
    });

ここでフィドルを見つけてください.. http://jsfiddle.net/VudYx/

于 2013-04-06T10:41:55.473 に答える