Highlight menu item depending on anchor selected? - php

Question

I'm using the following tutorial to create a one page website:
http://www.insitedesignlab.com/how-to-make-a-single-page-website/
Is it possible to change the color of the menu item depending on what anchor is selected?
This is how I've setup the menu
<?php $current = $post->ID; $counter = 1; $mypages = get_pages(array('sort_column' => 'menu_order'));
foreach( $mypages as $page ) { ?>
<?php if ($current == $page->ID) { ?>
<li><a style="color:white!IMPORTANT;" id="menu<?php echo $counter; ?>" href="#section<?php echo $counter; ?>"><?php echo $page->post_title; ?></a></li>
<?php } else { ?>
<li><a id="menu<?php echo $counter; ?>" href="#section<?php echo $counter; ?>"><?php echo $page->post_title; ?></a></li>
<?php } ?>
<?php $counter++; } ?>
So each menu iterates by 1 each time it loops.

Answer 1

You can try Jquery Tabs... Maybe its easier

Answer 2

Sure, I think the right approach here is to bind the tabs, I mean not depending in the anchor, so everytime a tab is clicked it will change,so first you have to add a class to all tabs like so:
<li><a style="color:white!IMPORTANT;" id="menu<?php echo $counter; ?>" class="tab" href="#section<?php echo $counter; ?>"><?php echo $page->post_title; ?></a></li>
after that you just need to bind the tab elements to the click function to fire the event every time a tab is selected:
$(".tab").click(function(e){
$(".tab").css("color", ""); //Remove the color from all tabs
$(this).css("color", "white!IMPORTANT"); //Apply the "highlight" color to the selected
});
this way we remove the color from all "tab" elements, and then we apply the color to the selected tab.

Answer 3

It would be better if you use a css class for the link that you want to be highlighted.
CSS:
.linkactive{
color:pink;
font-weight:bold;
}
jQuery:
$("#nav a").click(){
$(".linkactive").removeClass("linkactive");
$(this).addClass("linkactive");
});
Please remember to add the class "linkactive" to your home or starting tab.