Showing current page in CSS/HTML only

Personally, I think it's better to do this with PHP, but you can do it without using PHP.

It's all about the cascade. Say your menu looks like this...

HTML
<ul>
<li><a href="one.htm">first page</a></li>
<li><a href="two.htm">number two</a></li>
<li><a href="three.htm">third</a></li>
<li><a href="four.htm">page four</a></li>
<li><a href="five.htm">five</a></li>
<li><a href="six.htm">sixsixsix</a></li>
<li><a href="seven.htm">SEVEN</a></li>
<li><a href="eight.htm">eighth page</a></li>
<li><a href="nine.htm">NiNe</a></li>
<li><a href="ten.htm">TEN!</a></li>
</ul>

First, add an id to each list item. Something like this...

HTML
<ul>
<li id="i1"><a href="one.htm">first page</a></li>
<li id="i2"><a href="two.htm">number two</a></li>
<li id="i3"><a href="three.htm">third</a></li>
<li id="i4"><a href="four.htm">page four</a></li>
<li id="i5"><a href="five.htm">five</a></li>
<li id="i6"><a href="six.htm">sixsixsix</a></li>
<li id="i7"><a href="seven.htm">SEVEN</a></li>
<li id="i8"><a href="eight.htm">eighth page</a></li>
<li id="i9"><a href="nine.htm">NiNe</a></li>
<li id="i10"><a href="ten.htm">TEN!</a></li>
</ul>

After that, you give each body tag an id too, so on page one, you can have something like this...

HTML
<body id="p1">
<ul>
<li id="i1"><a href="one.htm">first page</a></li>
<li id="i2"><a href="two.htm">number two</a></li>
<li id="i3"><a href="three.htm">third</a></li>
<li id="i4"><a href="four.htm">page four</a></li>
<li id="i5"><a href="five.htm">five</a></li>
<li id="i6"><a href="six.htm">sixsixsix</a></li>
<li id="i7"><a href="seven.htm">SEVEN</a></li>
<li id="i8"><a href="eight.htm">eighth page</a></li>
<li id="i9"><a href="nine.htm">NiNe</a></li>
<li id="i10"><a href="ten.htm">TEN!</a></li>
</ul>
<p>one</p>
</body>

Of course, page two would be p2, page three - p3, etc.

By using the cascade, you can set a style for list item 1 on page 1, list item 2 on page 2, etc. The CSS would look something like this:

CSS
#p1 #i1 a,
#p2 #i2 a,
#p3 #i3 a,
#p4 #i4 a,
#p5 #i5 a,
#p6 #i6 a,
#p7 #i7 a,
#p8 #i8 a,
#p9 #i9 a,
#p10 #i10 a {
color:red;
}

Here's the example.

Comments

#1
2008-09-26 Ant P. says :

Wow, that's a great idea. I ended up writing an ugly if/else mess for mine when I could've just used this frown

Comment form

Please type the word 'PHP' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url