我有一个菜单有两个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编写它。 你能救我吗?
谢谢
答案 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";
};
};