javascript里怎么用DOM来灵活切换滑动门索引样式？
<style>#cv{width:300px;height:45px;position:relative}#cvspan{width:10px;height:10px;m...
<style>#cv{width:300px; height:45px; position:relative}#cv span{width:10px; height:10px; margin-left:15px; float:left; background:#000;}#cv span.n{ background:#FC3}.b{width:10px; height:10px; margin-left:15px; float:left; background:#0CF;}</style><script type="text/javascript">window.onload=function(){var nu=document.getElementsByTagName("span");for(var i=0; i<nu.length; i++){ nu[i].onclick=function(){ this.className="n"; var xiongdi=nu[i].nextSibling||nu[i].previousSibling; xiongdi.className="b"; } } }</script></head><body><div id="cv"><span class="n"></span><span></span><span></span><span></span><span></span><span></span></div>这个做的是滑动门的索引样式切换，到底是什么地方出了问题？为什么它只能在当前的索引改变样式，而不能在点击别的索引后恢复成点击之前的样式？不要只给代码我主要是想学习这个样式原理
展开
1个回答
展开全部
<style>
#cv{width:300px; height:45px; position:relative}
#cv span{width:10px; height:10px; margin-left:15px; float:left; background:#000;}
#cv span.n{ background:#FC3}
.b{width:10px; height:10px; margin-left:15px; float:left; background:#0CF;}
</style>
<script type="text/javascript">
window.onload=function(){
var nu=document.getElementsByTagName("span");
for(var i=0; i<nu.length; i++){
nu[i].onclick=function(){
for (var j = 0; j < nu.length; j++) {
nu[j].className='b';
}
this.className="n";
};
}
}
</script>
</head>
<body>
<div id="cv">
<span class="n"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
#cv{width:300px; height:45px; position:relative}
#cv span{width:10px; height:10px; margin-left:15px; float:left; background:#000;}
#cv span.n{ background:#FC3}
.b{width:10px; height:10px; margin-left:15px; float:left; background:#0CF;}
</style>
<script type="text/javascript">
window.onload=function(){
var nu=document.getElementsByTagName("span");
for(var i=0; i<nu.length; i++){
nu[i].onclick=function(){
for (var j = 0; j < nu.length; j++) {
nu[j].className='b';
}
this.className="n";
};
}
}
</script>
</head>
<body>
<div id="cv">
<span class="n"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
