Dynamically change CSS of link based on current page

Question

I have the following links at the top of my web page:

 <ul class="icyLink">

      <li><a class="nav1" href="index.html">The World of Icengale</a></li>
      <li><a class="nav1" href="history.htm">History of Icengale</a></li>
      <li><a class="nav1" href="calendar.htm">Time & Calendar of Icengale</a></li>

 </ul>

The color of each link is blue and each <li> has as a background image (background-image: url('../images/blue2.jpg').

What I would like to do is dynamically change the css of an individual link based on the current page. For example, if someone is on the history.htm page then the color of the link will change to white and the background image will change to another (in this case, "blue3). The css for all of the other links would remain the same. How would I do this?

As always, any and all help is greatly appreciated!

Take care and have a great day....

ciao, john.

David Hellsing · Accepted Answer · 2012-03-25 19:57:45Z

8

You can check each link and see if it matches the current location. This can be more or less advanced depending on your needs, but something like:

var loc = window.location.pathname;

$('.icyLink').find('a').each(function() {
  $(this).toggleClass('active', $(this).attr('href') == loc);
});

Then style the active class in your CSS:

.icyLink a.active{color:#fff}

answered Mar 25, 2012 at 19:57

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

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

Comments

Ajinkya · Accepted Answer · 2012-03-25 19:50:12Z

0

You are looking for jQuery .css or .addClass functions.

answered Mar 25, 2012 at 19:50

Ajinkya

22.7k33 gold badges113 silver badges164 bronze badges

Comments

elclanrs · Accepted Answer · 2012-03-25 19:52:48Z

0

Set a unique body id in each page and an id on each menu item then:

#home-page #home-menu,
#history-page #history-menu { background: blue; } // Etc....

answered Mar 25, 2012 at 19:52

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Comments

Wasim · Accepted Answer · 2012-03-25 20:02:05Z

0

<ul class="icyLink">

  <li><a class="nav1" href="index.html">The World of Icengale</a></li>
  <li><a class="nav1" href="history.htm">History of Icengale</a></li>
  <li><a class="nav1" href="calendar.htm">Time & Calendar of Icengale</a></li>

</ul>
<script>
$(document).ready(function(){
   $("a.nav1").click(function () {
      // switch all tabs off
      $(".active").removeClass("active");
      // switch this tab on
      $(this).addClass("active");
   });
});
</script>

css

.active{background-image: url('../images/blue3.jpg');color:#fff;}

edited Mar 25, 2012 at 20:02

answered Mar 25, 2012 at 19:55

Wasim

8967 silver badges24 bronze badges

1 Comment

Phill Healey Over a year ago

This doesn't work, because once the link is activated the new page loads and so you get a new page with no new markup.

Collectives™ on Stack Overflow

Dynamically change CSS of link based on current page

4 Answers 4

Comments

Comments

Comments

css

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

css

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related