用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

回答

相關問題