添加/删除类到 当你在特定的div上时使用Javascript。

Question

我打开这个帖子来问你对JavaScript的帮助。

我的网站被垂直划分为四个主要div。

<div id="homepage"> Content </ div>
<div id="page1"> Content </ div>
<div id="page2"> Content </ div>
<div id="page3"> Content </ div>
<div id="page4"> Content </ div>

在页面右侧有导航菜单，div位置：固定。

<div id="nav">
<ul>
<li> <a href="#homepage"> Homepage </ a> </ li>
<li> <a href="#page1"> Page1 </ a> </ li>
<li> <a href="#page2"> Page2 </ a> </ li>
<li> <a href="#page3"> Page3 </ a> </ li>
<li> <a href="#page4"> page4 </ a> </ li>
</ ul>
</ div>

我希望当你在div容器（page1或page2等）中添加到类对应的菜单项。

'可以用javascript做到这一点？提前致谢

Answer 1

您将使用节点树来设置属性。我的意思是说

var node = document.getElementById("dividname").getElementsByTagName("li")[i];
node.setAttribute("class", "classname");

删除类只是使用上面没有任何值

node.setAttribute("class", "");

Answer 2

在我看来，jquery中最简单的解决方案是：

$('.menu-link').click(function(){
 var divId = $(this).attr("href");
 $('.page-div').removeClass("special-class");
 $(divId).addClass("special-class");
});

请注意，.menu-link是<a>内部的<li>类，.page-div是带有ids page1，page2等的div类。