Question

我有一个菜单有两个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编写它。你能救我吗？

谢谢

Answer 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

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

1 个答案: