老师帮忙解释下

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

#content{

width:300px;

height:260px;

border: 1px solid #3bb4ff;

margin-top: 100px;

position: relative;

}

#content div{

width:80px;

height:35px;

color: white;

background: blue;

line-height: 35px;

text-align: center;

border-radius: 5px 5px 0 0;

border-right:1px solid #3bb4ff;

border-left:1px solid #3bb4ff;

border-top:1px solid #3bb4ff;

position: absolute;

top:-36px;

}

#content #bt0{ left:15px; }

#content #bt1{ left:100px; }

#content #bt2{ left:185px; }

#content .box1{background: white; color:black;}

#content .box{margin-left: 10px; color: black;

font-size:18px;

font-weight: bold; }

</style>

</head>

<body>

<div class="ind" id="bt2">jQuery</div>

<p></p>

</div>

var a=document.getElementById('bt0');

var b=document.getElementById('bt1');

var c=document.getElementById('bt2');

var ind=document.getElementsByClassName('ind');

var p=document.getElementsByTagName('p')[0];

var n=ind.length;

console.log(ind.length)

a.onclick=function(){

for(var i=0;i<ind.length; i++){

ind[i].style.background="blue";

ind[i].style.color="white" }

this.style.background="white";

this.style.color="black"

}

b.onclick=function(){

for(var i=0;i<ind.length; i++){

ind[i].style.background="blue";

ind[i].style.color="white" }

this.style.background="white";

this.style.color="black"

}

c.onclick=function(){

for(var i=0;i<ind.length; i++){

ind[i].style.background="blue";

ind[i].style.color="white" }

this.style.background="white";

this.style.color="black"

}

</script>

</body>

</html>

为什么下面代码这样直接elements.style.className="" 而无法实现效果?

var a=document.getElementById('bt0');

var b=document.getElementById('bt1');

var c=document.getElementById('bt2');

var ind=document.getElementsByClassName('ind');

var p=document.getElementsByTagName('p')[0];

var n=ind.length;

a.onclick=function(){

for(var i=0;i<ind.length; i++){

ind[i].className="";

}

this.className="box1";

}

b.onclick=function(){

for(var i=0;i<ind.length; i++){

ind[i].className="";

}

this.className="box1";

}

c.onclick=function(){

for(var i=0;i<ind.length; i++){

ind[i].className="";

}

this.className="box1";

}

</script>

梦幻泡影4348738 2018-07-10

源自：JavaScript内置对象 2-28 数组方法（splice）

收起

1回答

小于飞飞 2018-07-11 09:41:04

注意elements.style.className="" 的语法不对，应该如下：

修改样式：elements.style.styleName=样式属性值

修改类：elements.className = 定义的类的样式名

效果实现了点击变成白色，根据要求，点击变成白色，其他为蓝色，所以思路：通过for 把所有变成蓝色，然后把当前点击的变成白色，同时显示相应的内容。

动手实践，如解答你的疑惑，欢迎采纳，祝学习愉快。

收起回答

提问者梦幻泡影4348738 #1

下面的代码就是按照修改类：elements.className=“” 点击按钮不能实现其他变为蓝色试了很多次只有像最上面那样修改样式才能实现效果，所有帮忙看下什么原因

2018-07-11 17:48:10
小于飞飞回复提问者梦幻泡影4348738 #2

是因为 for 循环问题，在点击后 ind 的class 就会相应没有，所以相应的 ind.length 值会改变，出现异常，将var ind = document.getElementsByClassName('ind'); 调整 var ind = document.getElementsByTagName('div'); 动手实践，如解答你的疑问，欢迎采纳，祝学习愉快。

2018-07-11 18:28:35