Question

我的主导航菜单由WordPress控制，如下所示。我想在有人点击菜单中的链接时更改活动状态，方法是创建添加：背景颜色和颜色来设置样式。

虽然单击菜单项已成功显示背景颜色更改，但原始文本颜色尚未更改为活动状态。

的header.php

    <?php if ( has_nav_menu( 'primary' ) ) : ?>
        <nav class="main-navigation" role="navigation">
            <?php
                // Primary navigation menu.
                wp_nav_menu( array(
                    'menu_class'     => 'nav-menu',
                    'theme_location' => 'primary',
                ) );
            ?>
        </nav><!-- .main-navigation -->
    <?php endif; ?>

的jQuery

jQuery(document).ready(function(){
  jQuery('ul li a').click(function(){
    jQuery('li a').removeClass("active");
    jQuery(this).addClass("active");
  });
});

CSS（摘录）

a {
background-color: transparent;
}

.active{
   background-color: #242424;
  color: #ffffff;
}

  a:active,
   a:hover {
   outline: 0;
     }

.sidebar .main-navigation a {
display: block;
padding: 12px 0;
position: relative;
text-decoration: none;
   }

.sidebar .main-navigation ul {
list-style: none;
margin: 0;
  }

  .sidebar .main-navigation ul ul {
display: none;
margin-left: 12px;
  }

  .sidebar .main-navigation ul .toggled-on {
display: block;
  }

   .sidebar .main-navigation li {
border-top: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
   }

  .sidebar .main-navigation .nav-menu {
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }

   .sidebar .main-navigation .nav-menu > ul > li:first-child,
   .sidebar .main-navigation .nav-menu > li:first-child {
border-top: 0;
  }
   .sidebar .main-navigation .menu-item-has-children > a {
padding-right: 48px;
  }

导航菜单呈现的html为： -

<button id="sidebar-toggle" class="sidebar-toggle"></button>
<nav class="main-navigation" role="navigation">
    <div class="menu-top-menu-container">
        <ul id="menu-top-menu" class="nav-menu">
            <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-18"><a href="http://example.com/">Home</a></li>
            <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-19 active "><a href="http://example.com/about">About</a></li>
            <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://example.com/contact">Contact</a></li>
        </ul>
    </div>
</nav><!-- .main-navigation -->

成功将.active状态添加到菜单导航，但不是活动颜色

0 个答案: