0

現在のページにクラスを追加する方法について多くの回答を見てきましたが、それらはすべて JQuery を使用しています。

メニューには 2 つのレベルがありますが、クラスを最初のレベルの li タグにのみ適用したいと考えています。したがって、次の例では、ブログ ページ 2 がブログ li でアクティブであることを示します。

メニュー構造:

            <nav id="main_menu">
                <ul>
                    <li><a href="index">HOME</a></li>
                    <li><a href="blog">BLOG</a>
                        <ul>
                            <li><a href="1">1</a></li>
                            <li><a href="2">2</a></li>
                        </ul> 
                        </li>
                    <li><a href="contact">CONTACT</a></li>
                </ul>
            </nav>

私はこれを機能させましたが、常に変化する配列番号を使用しています。 

var node = document.getElementById("main_menu").getElementsByTagName("li")[0];
node.setAttribute("class", "active");

最上位の li は同じままですが、2 番目のレベルが変更されます。

配列番号を付けずに同じコードを実行したり、孫なしで ul の息子を使用したりすることはできますか?

JQueryを使用せずに、現在のページに基づいて動的にするにはどうすればよいですか? 一部のページでは、クラスを父の li タグに適用する必要があります。

4

2 に答える 2

1

getElementsByTagNameソースコードに現れる順序で要素を返します。要素の最初のレベルを取得する場合は<li>、最新のブラウザーで次のコードを使用できます。

var lis = document.getElementById('main_menu').children[0].children;

ただし、一部の古いブラウザー (Firefox 3 以前、Opera 9.x、Safari 3.x) では、このchildrenプロパティが提供されていません。childNodes代わりに、要素ノードのみを配列に並べ替えて、 のアイテムをフィルタリングする必要があります。

于 2013-07-22T13:42:07.837 に答える
0

別のアプローチを取りましょう：

「main_menu」 UL のすべての直接の子にクラスが本当に必要ですか? CSS のみの場合は、CSS セレクターのみを使用するべきではありませんか?

ul#main_menu > li { 
  /* your css here for active LI elements here */
}

それ以外の場合は、Andy E のソリューションが役に立ちます。しかし、番号付けに乗れるとは思いません。ほとんどのブラウザでサポートされ、要素の直接の子のみを選択できる Javascript のプロパティはありません。

于 2013-07-22T13:48:05.350 に答える