Question

我有这个导航菜单，在这里我想通过jQuery更改当前页面选择器的选项卡背景。

 <nav class="nav-container">
<ul id="main_menu" class="main_menu">


<li class="menu-item">
<a style="border-radius: 0px" class="button" href="who-are-we.php">Tab 1</a>
</li>

<li class="menu-item current-menu-ancestor active">
<a style="border-radius: 0px" class="button" href="who-are-we.php">Tab 2</a>
</li>

<li class="menu-item">
<a style="border-radius: 0px" class="button" href="who-are-we.php">Tab 3</a>
</li>

<li class="menu-item">
<a style="border-radius: 0px" class="button" href="who-are-we.php">Tab 4</a>
</li>

</ul>

</nav>

我要在表2中添加style =“ background-color：aqua;”。

我想遵循这个逻辑：

jquery if ( li contains class="current-menu-ancestor active" ) {

a style add "background-color: aqua;"

}

如何执行此操作??

Answer 1

仅使用CSS，它将是：

.menu-item.active a{
  background-color: aqua;
}

要更改点击.active类，如果还没有其他方法（？）：

$(".menu-item a").on("click",function(){
  $(".active").removeClass("active");
  $(this).parent(".menu-item").addClass("active");
}

Demo fiddle

Answer 2

实际上，您不需要条件。

尝试

$( "li.current-menu-ancestor.active a" ).css("background-color", "aqua");

基于jQuery的div类检查和CSS编辑

2 个答案: