JavaScript特定属性更改

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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 .