使用 onclick javascript 更改元素的类

Changing the class of an element with onclick javascript

提问by Jguy

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

我需要弄清楚当通过 javascript 触发 OnClick 时如何更改元素的类。

Basically, I have the following code:

基本上，我有以下代码：

index.html

索引.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:

我的 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".

这会将选项卡图像的背景更改为较暗的阴影，以表明它已被“点击”。所以，如果选项卡被“选中”，我基本上需要在 <li> 标签中添加一个 class="active"。

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

我有 javascript 代码，我在 Stack Overflow 上找到了它来尝试切换类，但它不起作用。

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.

所有 onclick 都有效（内容切换成功）但选项卡图像不切换。如果我手动将 class="active" 添加到 < li > 标记，然后单击任何其他选项卡，活动将消失并且不再返回，因此 javascript 正在执行某些操作。

what am I missing?

我错过了什么？

Thanks for any help you can provide.

感谢您的任何帮助，您可以提供。

回答by Someth Victory

Your code looks quite messy. Anyway try this:

你的代码看起来很乱。无论如何试试这个：

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

回答by Charlie Wu

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 ?

您在引用 news_content 和 events_content 的 javascript 中使用树 ID 来标识树选项卡、active_news、active_events、active_updates，是否应该引用 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";
  }
 }
}