想要为每个选定的菜单元素应用不同的类

Question

您好我在自定义wordpress菜单主题时出现问题。我想在每个选定的菜单上应用不同的类。

这正是我想要的。

<ul>
<li class="item1">Home Page</li>
<li class="item2">About Page</li>
<li class="item3">Contact Page</li>
</ul>

单击菜单项时，将在每个选定的菜单项上应用不同的类 例如，我想单击菜单项1，应将类active1添加到选定的

元素simillary中，如果我单击item2，则应将类active2添加到选定的

元素

这就是我试图实现这个目标的方法，但它不起作用

    add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
    function special_nav_class($classes, $item){

     if ($item == 'Home Page') {        
if( in_array('current-menu-item', $classes) ){
                    $classes[] = 'active1';
                }
    }

if ($item == 'Home Page') {         
if( in_array('current-menu-item', $classes) ){
                    $classes[] = 'active2';
                }
    }
         return $classes;

    }

任何人都可以帮助我吗？在此先感谢

Answer 1

这需要一些jQuery

PHP

首先，让我们构建菜单：

$menu = array(
    '1' => 'Home',
    '2' => 'About',
    '3' => 'contact',
);

PHP / HTML

<ul class="menu">
<?php foreach ($menu as $id => $item): ?>
    <li><a class="item item-<?= $id; ?>" href="#"><?= $item; ?></a></li>
<?php endforeach; ?>

的jQuery

$(document).ready(function() {
    $(document).on('click', '.item', function () {
            $('.item').removeClass('active');
            $(this).addClass('active');
    });
});

仔细阅读后，我发现你想用PHP添加这个类。为了让我回答你的问题，我需要知道$classes数组的外观。