使用onclick javascript更改元素的类

时间:2012-05-30 23:15:04

标签: javascript html css

我需要弄清楚当通过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;}

将标签图像的背景更改为更暗的阴影,以显示它已“点击”。所以,我基本上需要在&lt;中添加一个class =“active”。 li>如果标签被“选中”,则标记。

我有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”添加到&lt; li>标记,然后单击活动消失的任何其他选项卡,并且不会返回,因此javascript正在执行某些操作。

我错过了什么?

感谢您提供的任何帮助。

2 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分:0)

使用树ID来标识树标签,active_news,active_events,active_updates 在javascript中它引用了news_content和events_content,是否应该引用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";
  }
 }
}