0

Ok here is my dilemma. I have a header.php file that contains the header information (navigation and logo) I use that so that I can include the file in each my pages where it is needed and to make for easier editing. The issue I have is that I obviously cannot use :active to color or alter links text so the user knows what page they are on.

How can I achieve what I want with the way I am doing it, or am I stuck doing this the long way. Is there javascript that can do this.

Understand I am new to HTML and CSS and am looking for simple ways to change header and footer without having to edit every page individually.

Markos

user3450887
  • 1
  • You'll need to use either php (http://stackoverflow.com/questions/10884624/apply-a-specific-class-id-to-current-page-on-menu-php) or JavaScript (http://stackoverflow.com/questions/2397370/how-to-change-the-link-color-of-the-current-page-with-CSS, though this seems to be jQuery rather than plain JS, sadly). – David Thomas Mar 22 '14 at 22:46

2 Answers2

0

I don't know how your html looks like, but for example if you have jQuery included and you are using absolute patches in links you could use something like this:

$('a[href="'+document.location.origin+document.location.pathname+'"]').css('color', '#f00');

or if you don't have jQuery and have absolute links you can use something like this:

var a = document.getElementsByTagName('a');
for (i in a) { 
 if (a[i].href == document.location.origin+document.location.pathname){
    // red color 
    a[i].style.color = '#900'
 }
}
rjanjic
  • 2,640
  • 1
  • 15
  • 13
  • What I have is relatively simple. I don't know how to put my code in here to have a grey box like you have above. But it is essentially: of course they are in a div and there are more pages than the one, the css right now is just for hovering, but that isn't an issue. – user3450887 Mar 23 '14 at 09:08
-2

Add below CSS to your code. Then apply class to your <a> tags.

1.

/*choose current(active) a tag which has class named niceClass*/
.niceClass a.current {color:red;}

2.

<a href="http://www.example.com"  class="niceClass"> Link Title </a>
<a href="http://www.example.com2" class="niceClass"> Link Title2 </a>
...
hakki
  • 6,181
  • 6
  • 62
  • 106
  • No. He wants to style the link that points to the current page, not learn how to use CSS, and the CSS you show (with regards to the selector) is wrong. Hint: this question can't be answered without using JavaScript or a server side language. – David Thomas Mar 22 '14 at 22:38
  • Thank you, I will look into this and try applying it. I will post back if I can put something together based on what I read on the link you posted. – user3450887 Mar 22 '14 at 22:43