Improper formatting of links causing problems with CSS

Question

I am trying to change the background of a link to a color when it is clicked. I have seen many examples using jquery. It looks clean and is simple. I have it implemented and I basically copied courtesy of someone on stack putting together a nice simple fiddle. My problem is when the link goes to open you can see the white background and then it is gone.

Some of you will say this is because you are using :active pseudoclass in CSS however, I am not using that at all. However, it is behaving exactly as such.

Here is a fiddle with an example that works. http://jsfiddle.net/stewbydoo/9R5CG/15/

My question and problem is I copied this nav in the fiddle and put it in my code and change the href to actually link to another page. My file structure is simple with an index.html, about.html, contact.html, and link to my blog.

<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>

When I click the links for the simple .html pages the link acts like it is using the :active pseudoclass and it is not. When I click the link to my blog it actually adds the background to the link like it is supposed to and opens up the page in a new tab.

I'm confused. Can you clarify exactly what the desired result is, and what isn't working in your code example? — KatieK
– KatieK, Commented Nov 13, 2012 at 18:07
The desired result is when the link is clicked in the nav. I want the link background to change to a different color to show that it is selected. — j0hnstew
– j0hnstew, Commented Nov 13, 2012 at 19:51

Kraz · Accepted Answer · 2012-11-13 21:25:12Z

1

When you click one of the first link, the page reloads, which is why the javascript is resetted (and thus, no background styling).

Change your href value to # and it will work (but you won't change page anymore).

To fix it, you have 2 options :

disable the page reloading (e.preventdefault) on the links, and load your page content in ajax (complicated).
manage this server side (easier but require a dynamic language).

For 2, I'll suppose you have using php. And the code could roughly look like :

<?php
   $pageActiveIndex = false
   if ($_SERVER["REQUEST_URI"] == "index.html") {
      $pageActiveIndex = true;
   }
   //same thing for the other links
?>


<li><a <?php if($pageActiveIndex) echo 'class="activeTab"' ?> href="index.html">Home</a></li>
<li><a <?php if($pageActiveAbout) echo 'class="activeTab"' ?> href="about.html">About</a></li>
<li><a <?php if($pageActiveContact) echo 'class="activeTab"' ?> href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>

of course, adding target=_blank everywhere would work too... But I doubt it's the effect you want to have.

Edit

Since your website seems to be static, there's something super simple you could do to have your effect.

Add the custom css to your stylesheet, in some class (I named it "youarehere"), then open all your pages and change them.

in index.html

<li><a class="youarehere" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>

in about.html

<li><a href="index.html">Home</a></li>
<li><a class="youarehere" href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>

in contact.html

<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a class="youarehere" href="contact.html">Contact</a></li>
<li><a href="someblogaddresshere" target="_blank">Contact</a></li>

edited Nov 13, 2012 at 21:25

answered Nov 13, 2012 at 18:38

Kraz

7,1086 gold badges44 silver badges72 bronze badges

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

4 Comments

j0hnstew Over a year ago

I mean I see what your saying to do but I can't believe that it is this difficult to achieve this effect when almost all sites have this. I mean stack has it at the top right now. It changes the background color to orange if you are on the questions section. That is all I want to do. Well I guess I will try what you said.

Kraz Over a year ago

It's really not that complicated to do server side. And yup, SO way of handling it is probably similar to my method #2. Look at the code

<ul><li><a href="/questions" id="nav-questions">Questions</a></li> <li class="youarehere"><a href="/tags" id="nav-tags">Tags</a></li> [...]

. They add a class to the list's element based on the current page.

Kraz Over a year ago

Here, I've added a simple way to solve this on static webpages.

j0hnstew Over a year ago

Very good simple idea. I mean I did it the server side way and that worked but I have no doubt that the other one will work and honestly it's much simpler. Thanks for the help!

Collectives™ on Stack Overflow

Improper formatting of links causing problems with CSS

1 Answer 1

Edit

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related