在两个元素上添加/删除类名（没有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库）

回答

相关问题