Javascript 当前菜单项类突出显示2个菜单项
我的菜单如下：主页|关于我们|定价|联系。定价项目是一个自定义链接：Javascript 当前菜单项类突出显示2个菜单项,javascript,css,wordpress,less,Javascript,Css,Wordpress,Less,我的菜单如下：主页|关于我们|定价|联系。定价项目是一个自定义链接：home。本地#home pricing和关于我们和联系人的链接指向子页面 我遇到的问题是，在显示定价部分的静态主页上，主页和定价项都用当前菜单项类突出显示 我的少： .current-menu-item { a { @extend .btn; padding-left: $base-padding + 9px; padding-right: $base-padding +
home。本地#home pricing当前菜单项.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>
...
...
...
您能帮我找到一个解决方案吗？您可以像单击定价菜单一样使用javascript，然后您可以在定价菜单中添加活动类，并从主页菜单中删除。我在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>
jQuery（函数（$）{
$（文档）.ready（函数（）{
$（'#menu main li.pricing.current menu item'）.removeClass（'current-menu-item'）；
});
$（“#菜单主li.pricing”）。单击（函数（）{
$（'#menu main li.home.current menu item'）.removeClass（'current-menu-item'）；
$（'#menu main li.pricing'）.addClass（'current-menu-item'）；
});
$（“#menu main li.home”）。单击（函数（）{
$（'#menu main li.pricing.current menu item'）.removeClass（'current-menu-item'）；
$（'#menu main li.home'）.addClass（'current-menu-item'）；
});
});
也许这会对将来的某个人有所帮助。服务器无法区分这两种情况，因为哈希部分一开始并没有发送到服务器，所以在这两种情况下，它看到的都是对
/