html语言分栏,分栏切换.html · 18计算机应用技术一班/TextJavaScript2 - Gitee.com

Document

button {

margin: 10px;

width: 100px;

height: 40px;

cursor: pointer;

}

.current {

background-color: red;

}

按钮1

按钮2

按钮3

按钮4

按钮5

//需求：鼠标放到哪个button上，改button变成黄色背景(添加类)

var btnArr = document.getElementsByTagName("button");

//绑定事件

for(var i=0;i

btnArr[i].onmouseover = function () {

//【重要】排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current

//排他思想和for循环连用

for(var j=0;j

btnArr[j].className = "";

}

this.className = "current"; //【重要】核心代码

}

}

//鼠标离开current时，还原背景色

for(var i=0;i

btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原

this.className = "";

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史