Question

我有一个自定义侧边栏，由当前页面的兄弟姐妹列表填充。我想在此列表中的当前页面添加一个类，以便我可以在列表中突出显示它。我正在创建这样的侧边栏：

                      <div class="col-sm-3 col-sm-offset-1 button-column">
                            <?php

                                $siblingArgs = [
                                    'child_of' => $post->post_parent,
                                    'hierarchical' =>  0,
                                    'parent' => $post->post_parent,
                                ];

                                $siblingPages = get_pages($siblingArgs);
                                $currentChildren = get_pages('child_of='.$post->ID);

                                foreach ($siblingPages as $siblingPage) : ?>
                                    <a href="<?php echo $siblingPage->guid ?>" class="body-button"><?php echo $siblingPage->post_title ?></a>
                                    <?php if($siblingPage->ID == $post->ID && (!empty($currentChildren))) {
                                        echo '<ul class="hidden-list hidden-box">';
                                        foreach ($currentChildren as $child){
                                            echo '<li><a href="';
                                            echo $child->guid.'">';
                                            echo $child->post_title.'</a></li>';
                                        };
                                        echo '</ul>';
                                    };
                                endforeach; ?>
                        </div><!--end column-->

我正在尝试找出将类添加到侧栏列表中当前页面的最简单方法。任何帮助将不胜感激！

Answer 1

使用JS，您可以获取当前页面URL，然后在文档（当前页面）中找到锚标记并添加类（'active'）或您想要的任何类

$(window).load(function () {
    var pathname = window.location.pathname;
    $("a[href$='" + pathname + "']").addClass('yourClassNameHere');
});

Answer 2

您可以在身体标记中使用body_class()，例如

<body <?php body_class(); ?>>

它将根据当前页面生成唯一的主体类：

<body class="page page-id-2 page-parent page-template-default logged-in">

然后在css中你可以制作你的选择器

.page-id-2 .side_bar_global_class { /* Rules here */ }

将类添加到兄弟姐妹列表中的当前页面 - Wordpress

2 个答案: