Question

我需要一个javascript函数，当“li.activo2”并且有一个类“active”时这个addClass。“current_highlight”

我的HTML代码：

<div class="navbar-header">
   <button type="button " class="navbar-toggle navbtn_webds btn_webds" data-  toggle="collapse" data-target=".navbar-collapse">
      <div class="navbtn_webds iconbar_webds iconbar-top_webds"></div>
      <div class="navbtn_webds iconbar_webds iconbar-common_webds"></div>
      <div class="navbtn_webds iconbar_webds iconbar-common_webds"></div>
   </button>
   <a id="site-title" class="navbar-brand brand_webds" href="http://localhost/webds" title="" rel="home"> <small></small></a>
</div>
<div class="navbar-collapse collapse">
    <div class="navbar-collapse collapse">
        <ul id="menu_principal" class="nav navbar-nav pull-right ">
           <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-18">
              <a title="Serviços" rel="m_PageScroll2id" href="http://localhost/webds/#servicos">Serviços</a>
           </li>
           <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-20">
              <a title="Equipa" rel="m_PageScroll2id" href="http://localhost/webds/#equipa">Equipa</a>
           </li>
           <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-21">
              <a title="Trabalhos" rel="m_PageScroll2id" href="http://localhost/webds/#trabalhos">Trabalhos</a>
           </li>
           <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-22">
              <a title="Clientes" rel="m_PageScroll2id" href="http://localhost/webds/#clientes">Clientes</a>
           </li>
           <li id="menu-item-27" class="activo2 menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-27 active">
              <a title="Blog" href="http://localhost/webds/?page_id=2">Blog</a>
           </li>
           <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-23">
              <a title="Contactos" rel="m_PageScroll2id" href="http://localhost/webds/#contactos">Contactos</a>
           </li>
        </ul>
    </div>    
</div>

<!--/.nav-collapse -->

我的javascript代码：

$（document）.ready（function（）{

var CurrentPage = $('#menu_principal li').hasClass('.activo2');
var CurrentPage1 = $('#menu_principal li').hasClass('.active');


function CurrentMenu() {    
    $('.activo2').toggleClass('current_highlight');
}

if ( CurrentPage == true && CurrentPage1 == true) {
    CurrentMenu();
}
});

我的css：

.current_highlight {background: #fcf2e0; color: #ff9933;}

Answer 1

hasClass =＆gt;没有点的类名：

var CurrentPage = $('#menu_principal li').hasClass('activo2');
var CurrentPage1 = $('#menu_principal li').hasClass('active');

Answer 2

你可以尝试

if ($('#menu_principal li.activo2.active').length) {
    CurrentMenu();
}

DEMO

在你的密码中，你有一个错字。在hasClass()中，您需要提供不带.

的班级名称

 var CurrentPage = $('#menu_principal li').hasClass('.activo2');
                                                     ^

Answer 3

此函数将查找其上包含activo2的任何li并添加current_highlight，但如果没有，则会删除current_highlight（如果存在）。

$('li')each(function(){
 if($('.activo2').length == "true" {
 $(this).addClass('current_highlight');
 } else {
 $('li').removeClass('current_highlight');
 }
}

如何在我的wordpress navmenu上选择两类带有多类的<li>？</li>

3 个答案: