2

I have a sitemenu of which has links(ofcourse it does, its a blinking sitemenu), they only change colour when hovered over, these links are controlled by my sitemenu.php which is included in each page for easy alteration to the sitemenu.. My perdicament is that now I'd like it so that when you're on a page, the link which took you there is coloured until you leave that page. Which I can't do manually because all of the links are on one primary php script which if altered alters the rest in the same fashion.

I know how to add a class which will permanately colour a link but have no clue how to do the javascript though I think it would just use the current page url, find that in the sitemenu and add a class attribute.

Improve this question
2
  • possible duplicate of How to give active menu item different styling Commented Aug 8, 2011 at 17:39
  • The user did not have a php script controlling all the links on the sitemenu, I can not manually edit it as all the links are stored on one script and included in all the pages. Commented Aug 8, 2011 at 17:41

3 Answers 3

Reset to default
0

You can do this with your PHP script or with your Javascript function.

PHP:

In your sitemenu.php, do something like this where your menu is - 

<li><a href="index.php"<?php if($page == 'index') echo ' class="active"'; ?>>Home</a></li> <li><a href="b.php"<?php if($page == 'b') echo ' class="active"'; ?>>B</a></li> <li><a href="c.php"<?php if($page == 'c') echo ' class="active"'; ?>>C</a></li> <li><a href="d.php"<?php if($page == 'd') echo ' class="active"'; ?>>D</a></li>

Now, in each of your pages, you will just have to set $page before including your sitemenu.php file.

For example in your index page do something like

$page = 'index'; include('sitemenu.php');

Unless you are doing AJAX with your Javascript, you will have to parse out what page you are on, and then change the style of the link. If you are using AJAX for each link click, all you would have to do is inside of your onclick function use 

this.style.color='somecolor'

Hope this answered your question. Just personal preference here, but I like going with the PHP route. Makes it really easy to edit a nav anytime adding/removing items.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

How about adding some css rule like a:visited{color:#eeeeee;} or whatever? If you came from a certain page and there is a link in the menu who points to this page, this link should have the pseudo selector visited.

Improve this answer

Comments

0

This should give you the basic idea (using jQuery/JavaScript). It adds the active class to the current page. You may have to adjust a bit depending on your site's linking conventions:

var url = document.location.pathname.toString(); $('a').each( function() { // if it matches if ($(this).attr('href').indexOf(url) != -1) { $(this).addClass('active'); } });

Here's a working demo.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.