在兩個元素上添加/刪除類名（沒有js庫）

我有一個菜單爲兩個div的頁面。在兩個元素上添加/刪除類名（沒有js庫）

<nav id="menu"> 
<ul> 
    <li><a href="#" class="active">soft1</a></li> 
    <li><a href="#">soft2</a></li> 
</ul> 
</nav> 

<section> 
    <div id="soft1"> 
     <p>content</p> 
    </div> 
    <div id="soft2"> 
     <p>content</p> 
    </div> 
</section>

在從NAV的點擊，我想在菜單鏈接添加一個名爲「積極」級，並顯示在下面的權利股利。我將從一個活動選項卡開始，因此如果點擊第二個選項，我必須移除該課程。

例如：單擊Soft2鏈接=>在soft2鏈接上添加一個「活動」類別=>移除soft1鏈接上的活動類別=>顯示soft2塊。

我不使用任何JS庫。我想寫在純JS中。你能幫我嗎？

謝謝

來源

2014-03-25 FrancoisD

通過@BarbaraLaird引用的問題回答了這個完美。 – aurbano

我只想添加類。選項卡已經建立。 – FrancoisD

你可以找到一種方法來使用純Javascript來訪問DOM元素的屬性，幸運的是我們有'getAttribute'和'setAttribute'函數，這裏是一個例子小提琴http://jsfiddle.net/mFgcb/5/只需點擊在div上看到它的行動。 –

你可以做類似下面來實現：

window.onload = function showHide() { 
var x1 = document.getElementById('a1'); 
     x2 = document.getElementById('a2'); 
    s1= document.getElementById('soft1'); 
    s2= document.getElementById('soft2'); 
    x1.onclick = function() { 
    this.setAttribute("class","active"); 
    x2.removeAttribute("class"); 
    s1.style.display = "block"; 
    s2.style.display = "none"; 

    }; 

    x2.onclick = function() { 
    this.setAttribute("class","active"); 
    x1.removeAttribute("class"); 
    s1.style.display = "none"; 
    s2.style.display = "block"; 

    }; 

};

DEMO

來源

2014-03-25 17:08:18 defau1t

這是我在找的謝謝你！ – FrancoisD

在兩個元素上添加/刪除類名（沒有js庫）

回答

相關問題