当前菜单项类别突出显示2个菜单项
[英]Current menu item class highlighting 2 menu items
问题描述
My menu looks like this: Home page | 
我的菜单看起来像这样： 首页 | About us | 关于我们 | Pricing | 定价 | Contact . 联络 。 The pricing item is a custom link: home.local#home-pricing and the About us and Contact are pointing to subpages. 定价项目是一个自定义链接： home.local#home-pricing和“ 关于我们和联系方式”均指向子页面。
The problem that I have is that on the static home page where I'm displaying the pricing section, both Home page and Pricing items are highlighted with the current-menu-item class. 我遇到的问题是，在要显示定价部分的静态主页上， current-menu-item类同时突出显示了主页和定价项。
My less: 我的少：
.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);
}
}
and my home page: 和我的主页：
<!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>
Could you help me out to find a solution for this? 您能帮我找到解决方案吗？
2 个解决方案
解决方案1
0 2018-07-18 11:52:38
您可以像单击价格菜单时一样使用javascript，然后可以在价格菜单中添加活动类并从主页菜单中删除
解决方案2
0 已采纳 2018-07-18 15:32:11
I have added in wordpress admin a home class for home page and pricing class for pricing section. 我在wordpress admin中添加了主页的主页类和定价部分的定价类。 After that I have fallowed the clues left by @CBroe and @sunil (thank you for your help) and wrote this jQuery code: 之后，我放弃了@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>
Maybe this will help somebody in the future. 也许这会在将来对某人有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.