Question

我正在尝试在主容器中选择第一个标头并为其添加一个类。但我希望这依赖于他们所在网站的哪个部分。

例如。如果它们位于“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");
}

Answer 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");
}

Answer 2

您可以获取active导航元素的索引，然后根据此信息更新其他元素，例如：

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

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

这比您的代码更加模块化，并且更易于维护（不需要在不同的页面上使用不同的代码，这将适用于所有页面）。基本上，active元素的索引只需要与添加到colors元素的类的#mainbar数组的索引对齐。

Answer 3

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

$("#mainbar h1:first-child").toggleClass("orangeHead", $("#mainNav li:nth-child(2)").hasClass("active"));

Answer 4

有趣的是，您可以通过不同的方式获得相同的结果。这是另一种选择

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

参见 JSFIDDLE

我个人优先考虑伪类的.eq()方法，在很多情况下（可以说）更快。

如果页面上的其他元素具有某个类，如何将类添加到元素

4 个答案: