Menu highlight based on url pattern - php

Question

I have a sidebar menu that is created if a specific tag is found in a category. For example
Apples
Oranges
When clicked, the URL pattern would be as below:
/category/?tag=apples
The code that renders the menu is as below:
<?php if ( $term->slug == 'apples' ) {?>
<section class="item">
<h4><a href="<?php $category_id = get_query_var('cat');
echo get_category_link( $category_id );?>?tag=apples"> Apples</a>
</h4></section>
<?php } if ( $term->slug == 'oranges') {?>
<section class="item">
<h4><a href="<?php $category_id = get_query_var('cat');
echo get_category_link( $category_id );?>?tag=oranges"> Oranges</a>
</h4></section>
<? } ?>
<?php } } ?>
I'm having a difficult time to highlight "Apples" with a red background when that is the active URL pattern, and the same with Oranges having an orange background.
I have tried various Jquery fiddle examples that works perfectly on fiddle, but not when i implement them. Most are for static html pages which is easier to do.

Answer 1

This is probably something you should put in a loop, but an example for your apples section:
<section class="item <?php echo ($term->slug === $_GET('tag')) ? 'active' : '';">
<h4><a href="<?php $category_id = get_query_var('cat');
echo get_category_link( $category_id );?>?tag=apples"> Apples</a>
</h4></section>
Note that I have added an active class to the section element so that you can style that (or its children) differently.

Answer 2

Why not verify the $_GET variable and then highlight the active URL ?
if ($_GET['tag'] == 'apples')
echo ''; //Highlight : ON, with CSS
else
echo ''; //Highlight : OFF
Same goes for "oranges".

Answer 3

Since you tagged it with jQuery, you can solve it on the client side:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" :
decodeURIComponent(results[1].replace(/\+/g, " "));
}
$(function(){
var tag = getParameterByName('tag');
if(tag){
$('h4').filter(function(){
return $(this).text().toLowerCase() === tag;
}).css({ color: 'red' });
}
});
Allthough I suggest you solve it directly on the server using PHP. Just an alternative.