javascript - 将 .active 类添加到 div

Question

我试图在侧边栏 div 位于该页面时将 .active 类添加到其中。您可以在此处查看示例:http://nsiprojects.voodoodev3.co.uk/?page_id=193这实际上只是突出显示第一个 div，而不是事件的 div。

<div class="mezzanine-sub">
                <?php
$childpages = query_posts('orderby=menu_order&order=asc&post_type=page&post_parent=35');
if($childpages) { /* display the children content  */
foreach ($childpages as $post) :
setup_postdata($post) ?>
        <script type="text/javascript">
            $(function() {
                var current = location.pathname;
                $('.mezzanine-sub a').each(function() {
                    var $this = $(this);
                    // if the current path is like this link, make it active
                    if ($this.attr('href').indexOf(current) !== -1) {
                        $this.addClass('active');
                    }
                })
            })
</script>

     <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="mezzanine-sub-title">
        <span><?php the_title(); ?></span>
    <a>

     <!-- post thumbnail -->
    <?php
        global $post; ?>
    <?php
    $src = wp_get_attachment_image_src(get_post_thumbnail_id($post -> ID), array(5600, 1000), false, '');
    ?>
    <div class="mezzanine-sub-image" style="background: url(<?php echo $src[0]; ?> );border:<?php the_field('border'); ?>;"></div>
    <!-- /post thumbnail -->

    <!-- post title -->
                <?php
                endforeach;
                } ?>
                </div>

Answer 1

无需使用任何 jQuery/JavaScript 代码。您可以通过比较作为查询字符串存在的 page_id 来应用事件类。

<div class="mezzanine-sub">
    <?php
    $childpages = query_posts('orderby=menu_order&order=asc&post_type=page&post_parent=35');
    if ($childpages)
    {
        // Display the children content
        foreach ($childpages as $post)
        {
            setup_postdata($post)
            ?>
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="mezzanine-sub-title <?php echo!empty($_GET['page_id']) && $_GET['page_id'] == $post->ID ? "active" : NULL ?>">
                <span><?php the_title(); ?></span>
                <a>
                    <?php
                    global $post;
                    $src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(5600, 1000), false, '');
                    ?>
                    <div class="mezzanine-sub-image" style="background: url(<?php echo $src[0]; ?> );border:<?php the_field('border'); ?>;">
                    </div>
                </a>
            </a>
            <?php
        }
    }
    ?>
</div>