2

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

基本上，我有以下代码：

索引.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 > 标记，然后单击任何其他选项卡，则活动会消失并且不会回来，因此 javascript 正在执行某些操作。

我错过了什么？

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

4

2 回答 2

5

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

document.getElementById("active_news").className = '';
于 2012-05-31T02:40:42.190 回答
0

您在它引用 news_content 和 events_content 的 javascript 中使用树 ID 来标识树选项卡、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";
  }
 }
}
于 2012-05-31T02:43:43.197 回答