我试图只在该页面上添加一个.active类到侧边栏div。 您可以在此处看到示例: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>
答案 0 :(得分: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>