用onclick更改元素的类javascript

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

基本上，我有以下代码：

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

这改变了标签图像的背景暗的阴影来显示它的“点击”。所以，如果选项卡是“选中”的，我基本上需要添加一个class =“active”到< li>标签。

我有JavaScript代码，我发现这里堆栈溢出试图切换类，但它不工作。

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正在执行某些操作。

我错过了什么？

感谢您提供的任何帮助。

来源

2012-05-30 Jguy

呃，为什么会有什么这个问题？仅供参考，以前提出的问题没有一个能够解决我曾就这些问题表达过的问题，但没有得到有关这些问题的进一步“答案”，所以我不能标记它们“回答“除非我真的得到他们”回答“，我可以吗？谢谢。 – Jguy

你输出了正则表达式过程的返回吗？ – Sebas

@John例如，[你的第一个问题]（http://stackoverflow.com/questions/8829151/passing-values-to-a-function-from-within-a-function-in-python）有五个不同的用户要求澄清或建议改进，并且您甚至从未回应过其中一条评论。 – Phrogz

你的代码看起来很混乱。反正试试这个：

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

来源

2012-05-31 02:40:42

啊，我不认为你可以把这个空白，它会删除它，这就是我的问题。谢谢！ – Jguy

不客气... –

使用树ID来标识树的标签，active_news，active_events，在JavaScript active_updates 它引用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"; 
    } 
} 
}

来源

2012-05-31 02:43:43

原始代码正常工作，因为实际内容是由不同的ID命名的。如果可以的话，我肯定打算清理一下......但现在，我只是想让这件事情完成。谢谢！ – Jguy

用onclick更改元素的类javascript

回答

相关问题