Question

I have an index.php page which includes a navBar.inc page to render the top nav bar. I also have an external stylesheet. My goal is to highlight the current page in that navbar via PHP.

I’ve tried to implement it, but it isn’t working as I expected.

I placed PHP code at the top of the index.php page: <?php $thisPage="About"; ?>

Then in each li in the navBar.inc file, I have code that is supposed to change the id of each li, for example: <li><?php if ($thisPage=="About") echo " id=\"currentPage\""; ?>><a href="index.php">ABOUT</a></li>

And of course, in my external CSS I have: #currentPage {color:black;}

But when I upload the files to the server and try it out, it actually writes id=”currentPage” to the page rather than assigning it that id. Also, there are >’s between each menu item. See image link below.

Image

Can you help me get this working? I’m almost there I think! Thanks!

Note: This is my very first exposure to PHP. Syntax is a bit confusing, but looks interesting!

Answer 1

You are currently closing the <li> tag prior to echoing the variable, which means it’s rendering the id attribute and the > to screen:

<li><?php if ($thisPage=="About") echo " id=\"currentPage\""; ?>>
   ^                                                            ^
<a href="index.php">ABOUT</a></li>

You need to place your id attribute inside the <li> element like this:

<li<?php if ($thisPage=="About") echo " id=\"currentPage\""; ?>>
<a href="index.php">ABOUT</a></li>

As mentioned, you could accomplish this using javascript/jQuery, but this will work.

EDIT:

Try:

#currentPage a { color: black !important; }

Which overrides the prior styles you’ve set in your .CSS file.