1

jsfiddle.net/8KgRd

メイン コンテナの最初のヘッダーを選択して、それにクラスを追加しようとしています。しかし、私はこれが彼らがいるウェブサイトのセクションに依存することを望んでいます.

例えば。それらが「EAST Core」ページにある場合、ヘッダーをオレンジ色にしたいと思います。

HTML はバックエンドによって入力されるため、クラスをハードコードすることはできません。

HTML

<ul id="mainNav" class="nav navbar-nav">
    <li class='linked'><a href="/?id=12">EAST Program</a>
    </li>
    <li class='active linked'><a href="/?id=86">EAST Core</a>
    </li>
    <li class='linked'><a href="/?id=20">Get More Involved</a>
    </li>
    <li class=''><a href="/?id=21">Sponsors & Exhibitors</a>
    </li>
    <li class=''><a href="/?id=22">Newsroom</a>
    </li>
</ul>

<div id="mainbar">
     <h1>This is the title I want to add a class to.</h1>
</div>

.

JAVASCRIPT

if ($("#mainNav li:nth-child(2)"): hasClass("active")) {
$("#mainbar h1:first-child").addClass("orangeHead");
};

更新: によって解決:

if ( $("#mainNav li:nth-child(2)").hasClass("active") ) {
    $("#mainbar h1:first-child").addClass("orangeHead");
}
4

4 に答える 4

4

1つの方法は次のとおりです。

$("#mainNav li:nth-child(2).active")
    .closest("#mainNav").next()
    .find("h1:first-child").addClass("orangeHead");

別の方法（構文エラーが修正された元の方法）：

// this is probably the "better" way to do it of the two
if ( $("#mainNav li:nth-child(2)").hasClass("active") ) {
    $("#mainbar h1:first-child").addClass("orangeHead");
}
于 2013-09-30T18:01:05.160 に答える
2

ナビゲーション要素のインデックスを取得し、activeこの情報に基づいて他の要素を更新できます。次に例を示します。

var colorClasses = ['redHead', 'orangeHead', 'blueHead', 'greyHead', 'purpleHead'],
    index         = $("#mainNav").children(".active").index();

$("#mainbar").addClass(colorClasses[index]);

これはコードよりも少しモジュール化されており、保守が容易になります (異なるページに異なるコードを配置する必要はありません。これはすべてのページで機能します)。基本的に、要素のインデックスは、要素に追加されるクラスactiveの配列のインデックスと一致する必要があります。colors#mainbar

于 2013-09-30T18:03:10.777 に答える
0

同じ結果を達成するためにさまざまな方法を使用できるのは興味深いことです。ここに別のオプションがあります

toOrange = $("#mainNav").find("li").eq(1);
if( toOrange.is(".active") ){
   $("#mainbar > h1").addClass("orangeHead");
}

JSFIDDLEを参照してください

私は個人的に疑似クラスよりもメソッドを優先し.eq()ます。多くの場合、(おそらく) 高速です。

于 2013-09-30T18:15:50.910 に答える