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

一种方法是：

$("#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

您可以根据您的活动状态切换标题类

$("#mainbar h1:first-child").toggleClass("orangeHead", $("#mainNav li:nth-child(2)").hasClass("active"));
于 2013-09-30T18:07:54.817 回答
0

有趣的是，你可以有不同的方法来达到相同的结果。这是另一种选择

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

见JSFIDDLE

我个人更喜欢这种.eq()方法而不是伪类，在许多情况下它（可以说）更快。

于 2013-09-30T18:15:50.910 回答