Question

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

我遇到的问题是，在显示价格部分的静态首页上，首页和定价项目都用{{ 1}}类。

我的少：

current-menu-item

和我的主页：

.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);
    }
}

您能帮我找到解决方案吗？

Answer 1

您可以像单击定价菜单一样使用javascript，然后可以在定价菜单中添加活动类并从首页菜单中删除

Answer 2

我在wordpress admin中添加了主页的主页类和定价部分的定价类。之后，我放弃了@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>

也许这会在将来对某人有所帮助。

当前菜单项类别突出显示2个菜单项

2 个答案: