我正在使用此脚本向我的菜单项添加“活动”类。我的父菜单项之一是/path/library/。该类就在那里添加得很好。然后在该页面的分页（即 /path/library/?page-2）上，类仍然添加到父级中。对于父链接 /path/signage/，活动链接应用得很好。但是，当我有一个未分页的子项（即/path/signage/posters/）时，任何地方都不会应用活动链接。我迷路了。不知道为什么我不能让它正常工作，当它对一个人有效但对另一个人无效时。
这是我的脚本...
jQuery(document).ready(function($) {
$('.persist-header a').each(function () {
var $this = $(this);
if ($this.attr('href').indexOf(window.location.pathname) !== -1) {
$this.addClass('active');
}
});
});
编辑 好的，这是我的标题代码（这是一个 WP 站点。由于我从特定分类中提取图像，所以我没有使用 WP 菜单系统 - 我使用 ACF 来选择菜单中的项目）。
<div class="d-flex align-items-end">
<div class="content container-fluid" style="padding: 0 !important;">
<style>
.bordercolor0 {
border-color: #26b59c;
}
.bordercolor1 {
border-color: #f99d3f;
}
.bordercolor2 {
border-color: #d52352;
}
.bordercolor3 {
border-color: #ef453b;
}
.bordercolor4 {
border-color: #000000;
}
.bordercolorhome {
border-color: #000000;
}
</style>
<!-- MAIN NAV -->
<nav role="navigation" class="cblNavMenu persist-area">
<?php ?>
<div class="cblNavMenu--wrap static persist-header ">
<?php $term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );
if( have_rows('choose_top_level_category', 'option') ):
$c = 0;
while( have_rows('choose_top_level_category', 'option') ): the_row();
// vars
$term = get_sub_field('category', 'option');
$cat_label = get_sub_field('category_label', 'option');
$current_term_id = $term->term_id;
?>
<a class="cblNavMenu--link navBtn max <?php echo int_to_words($c); ?> " href="<?php echo esc_url( get_term_link( $term ) ); ?>" role="button">
<div class="cblNavMenu--link__content block">
<div class="cblNavMenu--icon">
<?php $args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'posts_per_page' => 1,
'tax_query' => array(
array(
'taxonomy' => 'mediacat',
'terms' => $term->term_id,
)
),
'orderby' => 'rand',
'post_status' => 'inherit',
//'fields' => 'ids'
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) :
$loop->the_post();
$item = get_the_id();
$attachment_image = wp_get_attachment_image_url( $item, 'square' );
?>
<figure class="cblNavMenu--icon__imgwrap">
<img class="cblNavMenu--icon__img" src="<?php echo $attachment_image; ?>" alt="<?php echo $term->name;?>"/>
</figure>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
<span class="cblNavMenu--label"><?php if($cat_label) { echo $cat_label; } else { echo $term->name; } ?></span>
</div>
</a>
<?php $c++; endwhile;
endif; ?>
<script>
jQuery(document).ready(function($) {
$('.persist-header a').each(function () {
var $this = $(this);
if ($this.attr('href').indexOf(window.location.pathname) !== -1) {
$this.addClass('active');
}
});
});
</script>
<script>
jQuery(function($) {
if ($('.zero.active').length > 0) {
$('.cblNavMenu--wrap').addClass('bordercolor0');
}
if ($('.one.active').length > 0) {
$('.cblNavMenu--wrap').addClass('bordercolor1');
}
if ($('.two.active').length > 0) {
$('.cblNavMenu--wrap').addClass('bordercolor2');
}
if ($('.three.active').length > 0) {
$('.cblNavMenu--wrap').addClass('bordercolor3');
}
if ($('.four.active').length > 0) {
$('.cblNavMenu--wrap').addClass('bordercolor4');
}
if ($('.zero.active').length > 0) {
$('footer').addClass('bordercolor0');
}
if ($('.one.active').length > 0) {
$('footer').addClass('bordercolor1');
}
if ($('.two.active').length > 0) {
$('footer').addClass('bordercolor2');
}
if ($('.three.active').length > 0) {
$('footer').addClass('bordercolor3');
}
if ($('.four.active').length > 0) {
$('footer').addClass('bordercolor4');
}
if ($('body.home').length > 0) {
$('footer').addClass('bordercolorhome');
}
});
</script>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</nav>
</div>
</div>
还有我的分类页面，它对于分页的子项非常有用，但不适用于普通子项（当然 get_header 和 get_footer 代码也在那里。不过，将它们包含在这里似乎是多余的）...
<div id="post-<?php the_ID(); ?>" <?php post_class(''); ?>>
<div class="content container-fluid" style="padding: 0 !important;">
<div class="row justify-content-center">
<div class="col-md-9">
<?php $term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) );
$paged = (get_query_var('page')) ? get_query_var('page') : 1;
$current_term_id = $term->term_id;
$current_name = $term->name;
$current_taxonomy = $term->taxonomy;
$current_parent = $term->parent;
?>
<h1 class="header__title">
<i class="fas fa-map-marker-alt"></i>
<?php echo $current_name; ?>
</h1>
<?php $sub_terms = get_terms( array(
'taxonomy' => $current_taxonomy,
'child_of' => $current_term_id,
'hide_empty' => true,
) );
if ($sub_terms) {
?>
<ul class="sub-terms">
<?php foreach ($sub_terms as $sub_term) { ?>
<li><a href="<?php echo get_term_link( $sub_term ) ?>" class="sub"><?php echo $sub_term->name?></a></li>
<?php }// END foreach ?>
</ul><!-- END .sub-terms -->
<?php }// END if ?>
<main>
Search Form Here
<div class="container-fluid">
<div class="row justify-content-center">
<div class="pagination_links" style="clear: both;">
<?php $args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'tax_query' => array(
array(
'taxonomy' => $term->taxonomy,
'field' => 'term_id',
'terms' => $current_term_id
)
),
'orderby' => 'title',
'order' => 'asc',
'posts_per_page' => '20',
'paged' => $paged,
'post_status' => 'inherit'
);
$loop = new WP_Query( $args );
$c = 0;
?>
<?php $big = 999999999; // need an unlikely integer
for ($i=1;$i<=$loop->max_num_pages;$i++) { ?>
<a href="<?php str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ) ?>?page=<?php echo $i; ?>" class="page-numbers current" aria-current="page">Page <?php echo $i; ?></a>
<?php }
?>
</div>
</div>
<div class="row justify-content-center">
<form class="wpsp-page-nav-form" action="<?php echo $_SERVER['REQUEST_URI'];?>" method="get" style="text-align: center;">
<div class="col-6 offset-3">
<label for="sortby" class="wpsp-label wpsp-hidden" style="display: inline-block;"><?php _e('Jump to', 'wp-smart-pagination'); ?></label>
<input class="wpsp-input-number" type="text" placeholder="page..." size="15" name="page" style="display: inline-block; width: auto; background-color: #fff;"/>
<button class="btn" type="submit" style="display: inline-block;"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
</div>
</form>
</div>
<div class="row justify-content-center">
<div class="container-fluid">
<div class="grid">
<div class="grid-sizer"></div>
<?php $c = 0;
if ( $loop->have_posts() ) {
while ( $loop->have_posts() ) {
$loop->the_post();
$item = get_the_id();
$atts = wp_get_attachment_image_src($item, 'large');
$image_all = wp_prepare_attachment_for_js($item);
$attachment_page = wp_get_attachment_url( $item );
$title = wp_prepare_attachment_for_js($item);
$image_title = wp_prepare_attachment_for_js($item);
?>
<div class="grid-item">
<div class="entry-title-box">
<h3 class="entry-title"><?php echo $image_title['title']; ?></h3>
</div>
<img src="<?php echo $atts[0]; ?>" alt="<?php echo $image_all['alt']; ?>">
<div class="entry-content-box">
<p>keywords: <em><?php if (empty($image_all['alt'])) { echo $image_all['caption']; } else { echo $image_all['alt']; } ?></em></p>
<div id="fileName<?php echo $loop->current_post +1; ?>" style="display: none;"><?php echo $image_title['title']; ?></div>
<div class="btn-group">
<button class="btn btn-primary btn2 js-tooltip" id="btnCopy" rel="fileName<?php echo $loop->current_post +1; ?>" type="button" data-toggle="popover" title="copied">Copy Filename</button>
<button type="button" class="btn btn-default btn2 js-tooltip" id="btnCopy" rel="fileName" type="button" data-toggle="popover" title="copied">
<!-- icon from google's material design library -->
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
<path d="M17,9H7V7H17M17,13H7V11H17M14,17H7V15H14M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z" />
</svg>
</button>
</div>
<button id="btn_link" class="btn btn-secondary" type="button" href="#" data-toggle="modal" data-target="#galleryModal<?php echo $loop->current_post +1; ?>" data-backdrop="static" data-keyboard="false" style="margin-top: 5px;">Suggest keywords</button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="galleryModal<?php echo $loop->current_post +1; ?>" tabindex="-1" role="dialog" aria-labelledby="galleryModalLabel<?php echo $loop->current_post +1; ?>" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body d-flex h-100">
<div class="row justify-content-center align-self-center">
<div class="col-md-6" style="text-align: center;">
<img src="<?php echo $atts[0]; ?>" class="img-fluid img-thumbnail">
</div>
<div class="col-md-6">
<div class="row">
<h2 class="modal-title" id="galleryModalLabel<?php echo $loop->current_post +1; ?>"><span id="copyit"><?php echo $image_title['title']; ?></span></h2>
</div>
<div class="row">
<p>keywords: <em><?php if (empty($image_all['alt'])) { echo $image_all['caption']; } else { echo $image_all['alt']; } ?></em></p>
</div>
<div class="row" id="message">
<?php echo do_shortcode( '[gravityform id="1" field_values="filename='. $image_title['title'] .'" ajax="true"]' ); ?>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } $c++; } wp_reset_postdata(); ?>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
// init Masonry
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
columnWidth: '.grid-sizer'
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry();
});
});
jQuery(document).on("click", "#btnCopy", function(ev) {
var $body = document.getElementsByTagName('body')[0];
var rel = jQuery(this).attr("rel");
var text = jQuery("#"+rel).text();
var $tempInput = document.createElement('INPUT');
$body.appendChild($tempInput);
$tempInput.setAttribute('value', text)
$tempInput.select();
document.execCommand('copy');
$body.removeChild($tempInput);
});
jQuery(function () {
jQuery('[data-toggle="popover"]').popover().click(function () {
setTimeout(function () {
jQuery('[data-toggle="popover"]').popover('hide');
}, 2000);
});
});
</script>
</div>
<div class="row justify-content-center">
<div class="pagination_links" style="clear: both;">
<?php $big = 999999999; // need an unlikely integer
for ($i=1;$i<=$loop->max_num_pages;$i++) { ?>
<a href="<?php str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ) ?>?page=<?php echo $i; ?>" class="page-numbers current" aria-current="page">Page <?php echo $i; ?></a><?php }
?>
</div>
</div>
<div class="row justify-content-center">
<form class="wpsp-page-nav-form" action="<?php echo $_SERVER['REQUEST_URI'];?>" method="get" style="text-align: center;">
<div class="col-6 offset-3">
<label for="sortby" class="wpsp-label wpsp-hidden" style="display: inline-block;"><?php _e('Jump to', 'wp-smart-pagination'); ?></label>
<input class="wpsp-input-number" type="text" placeholder="page..." size="15" name="page" style="display: inline-block; width: auto; background-color: #fff;"/>
<button class="btn" type="submit" style="display: inline-block;"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
</div>
</form>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
我通过提出问题的不同版本here找到了解决方案，因为当我解决分页问题时，我原来的问题发生了变化，所以它不再执行“path/term/?page=2”，而是更改为“ path/term/page/2”，当我在“path/term/sub-term”等子页面上时，我仍然很难应用该样式。
$('.persist-header a[href*="/<?php echo $term2->slug; ?>/"]').addClass('active');
效果很好！