使用onclick javascript更改元素的類

Question

我需要弄清楚當通過javascript觸發OnClick時如何更改元素的類。

基本上，我有以下代碼：

的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>

此圖像列表顯示在框的左側，該框用於切換框中顯示的內容。

我的CSS中有一個課程：

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

這會將選項卡圖像的背景更改為較深的陰影，以表明它已被“單擊”。 因此，如果選項卡被“選中”，我基本上需要在<li>標記中添加class =“ active”。

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

所有onclick均有效（內容已成功切換），但選項卡圖像未切換。 如果我將class =“ active”手動添加到<li>標記，然后單擊其他任何選項卡，active就會消失並且不會再出現，因此javascript正在做什么。

我想念什么？

感謝您的任何幫助，您可以提供。

Answer 1

您的代碼看起來很混亂。 無論如何嘗試：

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

Answer 2

您使用樹ID來標識它引用了news_content和events_content的javascript中的樹選項卡，active_news，active_events，active_updates，是否應該引用active_news，active_events？

所以代碼應該看起來像

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