在两个元素上添加/删除类名(没有js库)

时间:2014-03-25 16:45:29

标签: javascript html css

我有一个菜单有两个div的页面。

<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>

点击导航后的点击,我想添加一个名为&#34; active&#34;在菜单链接上,并在下面显示正确的div。我将从一个活动标签开始,所以如果我点击第二个,我必须删除该课程。

例如:点击Soft2链接=&gt;添加&#34;活跃&#34; soft2 link上的类=&gt;删除soft1链接上的活动类=&gt;显示soft2块。

我没有使用任何JS库。我想用纯JS编写它。 你能救我吗?

谢谢

1 个答案:

答案 0 :(得分:1)

您可以执行以下操作来实现此目的:

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