当前菜单项 class 突出显示 2 个菜单项

Question

我的菜单如下所示：主页 | 关于我们 | 定价 | 联系。定价项目是自定义 link：home.local#home-pricing 和 关于我们 和 联系方式 指向子页面。

我遇到的问题是，在显示定价部分的静态主页上，主页 和 定价 项目用 current-menu-item class.

突出显示

我的少：

.current-menu-item {
    a {
        @extend .btn;
        padding-left: $base-padding + 9px;
        padding-right: $base-padding + 9px;
    }
}

.btn {
    background: $yellow-color;
    border-radius: $base-radius;
    padding: $btn-padding;
    color: $purple-color;
    text-transform: uppercase;
    margin-top: $base-padding * 2;
    font-family: $heading-font-family;
    font-size: $base-font-size + .500rem;
    border: 0;
    &:hover {
        color: $purple-color;
        text-decoration: underline;
        @include linear-gradient($yellow-color 50%, $darker-yellow-color);
    }
}

还有我的主页：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <?php get_template_part('templates/head'); ?>

    <body <?php body_class(); ?>>    
        <?php get_template_part('templates/fb'); ?>
        <?php get_template_part('templates/header'); ?>

        <div id="home-about-us">
            ...
        </div><!-- #home-about-us -->
        <div id="home-pricing">
            ...
        </div><!-- #home-pricing -->
        <div id="home-news">
            ...
        </div><!-- #home-news -->
    </body>

    <?php get_template_part('templates/footer' ); ?>
</html>

你能帮我找到解决办法吗？

Answer 1

您可以像点击定价菜单时那样使用 javascript 然后您可以在定价菜单中添加活动 class 并从主页菜单中删除

Answer 2

我在 wordpress 管理中添加了主页 class 主页和定价 class 定价部分。之后我根据@CBroe 和@sunil 留下的线索（感谢您的帮助）写下了这段 jQuery 代码：

<script type="text/javascript">
  jQuery(function($){

   $(document).ready(function() {
     $('#menu-main li.pricing.current-menu-item').removeClass('current-menu-item');
   });

   $("#menu-main li.pricing").click(function(){
     $('#menu-main li.home.current-menu-item').removeClass('current-menu-item');
     $('#menu-main li.pricing').addClass('current-menu-item');
   });

   $("#menu-main li.home").click(function(){
     $('#menu-main li.pricing.current-menu-item').removeClass('current-menu-item');
     $('#menu-main li.home').addClass('current-menu-item');
   });
 });
</script>

也许这对以后的人有帮助。

当前菜单项 class 突出显示 2 个菜单项

Current menu item class highlighting 2 menu items

javascript

css

wordpress

less