Changing the class of an element with onclick javascript

Question

I need to figure out how to change the class of an element when an OnClick is triggered via javascript.

Basically, I have the following code:

index.html

<div class="bottom_section">
 <div class="tab_section">
  <div class="tabing">
   <ul>
    <li id="active_news"><a onclick="ContentSwitch('News');">
     <img src="includes/t_news.png" width="23" height="81" alt="t_news">
    </a></li>
    <li id="active_events"><a onclick="ContentSwitch('Events');">
     <img src="includes/t_events.png" width="20" height="121" alt="t_events">
    </a></li>
    <li id="active_updates"><a onclick="ContentSwitch('Updates');">
     <img src="includes/t_updates.png" width="19" height="141" alt="t_updates">
    </a></li>
   </ul>
  </div>

this list of images appears on the left of a box that switches the content shown in the box.

I have a class in my css:

.bottom_section .tabing li.active{background: #1ca1e3 url(tab_li_active.gif) repeat-x 0 0;}

That changes the background of the tab image to a darker shade to show that it's "clicked". So, I basically need to add a class="active" to the < li > tag if the tab is "selected".

I have the javascript code, which I found here on Stack Overflow to try and switch the class but it doesn't work.

function ContentSwitch(id) {
 if (id == "News") {
  if (document.getElementById("news_content").style.display = "none") {
   document.getElementById("news_content").style.display = "block";
   document.getElementById("active_news").className = document.getElementById("active_news").className.replace( /(?:^|\s)active(?!\S)/ , '' )

   // Hide other content
   document.getElementById("events_content").style.display = "none";
   document.getElementById("updates_content").style.display = "none";
  }
 }
 if (id == "Events") {
  if (document.getElementById("events_content").style.display = "none") {
   document.getElementById("events_content").style.display = "block";
   document.getElementById("active_events").className = document.getElementById("active_events").className.replace( /(?:^|\s)active(?!\S)/ , '' )

   // Hide other content
   document.getElementById("news_content").style.display = "none";
   document.getElementById("updates_content").style.display = "none";
  }
 }
 if (id == "Updates") {
  if (document.getElementById("updates_content").style.display = "none") {
   document.getElementById("updates_content").style.display = "block";
   document.getElementById("active_updates").className = document.getElementById("active_updates").className.replace( /(?:^|\s)active(?!\S)/ , '' )

   // Hide other content
   document.getElementById("news_content").style.display = "none";
   document.getElementById("events_content").style.display = "none";
  }
 }
}

All the onclick works (the content is switched successfully) but the tab images do not switch. If I add manually the class="active" to the < li > tag, and click on any other tab the active goes away and doesn't come back, so the javascript is doing something.

what am I missing?

Thanks for any help you can provide.

Er, why would that have anything to do with this question? FYI, none of the previous "answers" that were given on previous questions solved the issues, which I had expressed on those questions and to no avail, I did not receive further "answers" to those questions so I can't mark them "answered" unless I actually get them "answered", can I? Thanks. — Jguy
– Jguy, Commented May 31, 2012 at 1:17
@John For example, your first question had five different users asking for clarification or suggesting improvement, and you never even responded to one of those comments. — Phrogz
– Phrogz, Commented May 31, 2012 at 2:48

Someth Victory · Accepted Answer · 2012-05-31 02:40:42Z

6

Your code looks quite messy. Anyway try this:

document.getElementById("active_news").className = '';

answered May 31, 2012 at 2:40

Someth Victory

4,5592 gold badges26 silver badges27 bronze badges

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

1 Comment

Jguy Over a year ago

Ah, I didn't think you could just make this blank and it would remove it, that's where my issue was. thanks!

Charlie Wu · Accepted Answer · 2012-05-31 02:43:43Z

you use tree ids to identity tree tabs, active_news, active_events, active_updates in the javascript it references news_content and events_content, should that references active_news, active_events ?

so the code should look like

    function ContentSwitch(id) {
 if (id == "News") {
  if (document.getElementById("active_news").style.display = "none") {
   document.getElementById("active_news").style.display = "block";
   document.getElementById("active_news").className = document.getElementById("active_news").className.replace( /(?:^|\s)active(?!\S)/ , '' )

   // Hide other content
   document.getElementById("active_events").style.display = "none";
   document.getElementById("active_updates").style.display = "none";
  }
 }
 if (id == "Events") {
  if (document.getElementById("active_events").style.display = "none") {
   document.getElementById("active_events").style.display = "block";
   document.getElementById("active_events").className = document.getElementById("active_events").className.replace( /(?:^|\s)active(?!\S)/ , '' )

   // Hide other content
   document.getElementById("active_updates").style.display = "none";
   document.getElementById("active_news").style.display = "none";
  }
 }
 if (id == "Updates") {
  if (document.getElementById("active_updates").style.display = "none") {
   document.getElementById("active_updates").style.display = "block";
   document.getElementById("active_updates").className = document.getElementById("active_updates").className.replace( /(?:^|\s)active(?!\S)/ , '' )

   // Hide other content
   document.getElementById("active_events").style.display = "none";
   document.getElementById("active_news").style.display = "none";
  }
 }
}

the original code worked fine, as the actual content are named by a different ID. I definitely plan on cleaning it up a bit if I can...but for now, I just want to get the darn thing done. Thanks!

Collectives™ on Stack Overflow

Changing the class of an element with onclick javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related