CODEWITHSUNDEEP
javascripthtmlcss
Jguy
Jguy

Reputation: 580

Changing the class of an element with onclick javascript

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.

Upvotes: 2

Views: 13196

Answers (2)

Charlie Wu
Charlie Wu

Reputation: 7757

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";
  }
 }
}

Upvotes: 0

Someth Victory
Someth Victory

Reputation: 4549

Your code looks quite messy. Anyway try this:

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

Upvotes: 6

Related Questions