Setting CSS color with javascript onclick

Question

Hi i am trying to make my menu link go red when i am on that page and its not working.

Html:

<li><a id="home" onclick="changeClass('home')" href="index.php">Home</a></li>

CSS:

#topMenu li{
    display:inline;
    margin-right:60px;
    font-size:12px;
    font-weight:bold;
    color:#000;
    text-decoration:none;
    }

#topMenu li a{
    color:#000;
    text-decoration:none;
    }

#topMenu li a:hover{
    color:#666;
    text-decoration:underline;
    }

.topMenuon{
    color:#F00
    }

Javascript:

 function changeClass(id)
    {
       var element = document.getElementById(id);
       element.className = element.className + ”topMenuon”;

    }

Any ideas on how i could get this to work?

Amir Abu Shareb · Accepted Answer · 2012-09-04 09:29:01Z

1

You might want to do that server side, but if for some reason you cannot and you cannot use jQuery:

function changeClass (id) {
  var el = document.getElementById(id);
  if (el.href == location.pathname) el.className += 'topMenuon';
};

answered Sep 4, 2012 at 9:29

Amir Abu Shareb

16610 bronze badges

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

Comments

sajawikio · Accepted Answer · 2012-09-04 09:29:21Z

1

It's simpler to Include Jquery, and do this:

$('#home').on('click',function(){

   $(this).addClass('topmenuon');

});

However, it won't work like that if you are going to another page. You must detect what page you are on somehow in javascript/jquery (using something in the url, or using identifier on the page such as the section title), and then add your class while you are on that page (or,do it server side and don't call it at all if server renders directly). Can't use onclick like that if you're leaving the page anyway, new page has no way of knowing if you are doing full postback rather than ajax!

edited Sep 4, 2012 at 9:29

answered Sep 4, 2012 at 9:24

sajawikio

1,5147 silver badges12 bronze badges

Comments

Clyde Lobo · Accepted Answer · 2012-09-04 09:30:00Z

0

Plain js

window.onload = function(){
   document.getElementById("home").onclick = function(){
      this.className +=" topMenuon" ;
   }
}

Edit

You are probably going to a new page on the click of the link. Hence the above code would not change the class of the link since you are now on a new page.

You may need to add the class to the link using php(i assume you are using it).

answered Sep 4, 2012 at 9:30

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

Comments

Arpit Srivastava · Accepted Answer · 2012-09-04 09:31:16Z

0

Apply as

var element = document.getElementById('home');  
        element.setAttribute("className", newClass);

answered Sep 4, 2012 at 9:31

Arpit Srivastava

2,2351 gold badge16 silver badges28 bronze badges

Comments

Nikhil D · Accepted Answer · 2012-09-04 09:34:13Z

0

function changeClass()
        {
            var element = document.getElementById('home');
            element.className += 'topMenuon';
        } 


<li><a id="home" onclick="changeClass();" href="#">Home</a></li>

answered Sep 4, 2012 at 9:34

Nikhil D

2,5193 gold badges22 silver badges42 bronze badges

Comments

Scott Clark · Accepted Answer · 2012-09-04 09:45:44Z

0

use jquery - this in the <head>...

 <script src="yourPath/jquery_1.8.0_min.js" type="text/javascript"></script>

then...

 $(document).ready(function(){

   $("#home").addClass('topMenuon');

 }

that'll do it...

S

edited Sep 4, 2012 at 9:45

answered Sep 4, 2012 at 9:25

Scott Clark

1981 gold badge2 silver badges9 bronze badges

2 Comments

Quentin Over a year ago

You're rewritten the code, so it does exactly the same thing, but with many more kilobytes of code, and without solving the problem.

Scott Clark Over a year ago

@Quentin - you're right! Thanks for pointing out. After reviewing, surely the update above would be sufficient, no? Re using more k of code, "I defer to your superior knowledge" ;)

Collectives™ on Stack Overflow

Setting CSS color with javascript onclick

6 Answers 6

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related