原生javascript选项卡鼠标点击移过实现效果代码
原生javascript选项卡鼠标点击移过实现效果代码首先html代码
<div id="container">
<input type="button" id="btn1" value="黄色" class="active">
<input type="button" id="btn2" value="红色">
<input type="button" id="btn3" value="绿色">
<input type="button" id="btn4" value="褐色">
<div id="cont">
<div style="display: block;">111</div>
<div>222</div>
<div>333</div>
<div>444</div>
</div>
</div>简单的css代码：
* { margin: 0; padding: 0; }
#container { width: 204px; margin: 0 auto; }
#container .active { background-color: yellow }
#cont { width: 200px; height: 200px; border: 1px solid #333; background-color: #999 }
#cont div { display: none; }重点的js代码：
window.onload = function(){
var oContainer = document.getElementById("container");
var aIput = oContainer.getElementsByTagName("input");
var oCont = document.getElementById("cont");
var aDiv = oCont.getElementsByTagName("div");
for( var i = 0; i < aIput.length; i ++ ){
aIput.index = i;
aIput.onclick = function(){
for( var i = 0; i < aIput.length; i ++ ){
aIput.className = "";
aDiv.style.display = "none"
}
this.className = "active";
aDiv.style.display = "block"
}
}
}
点击改移动效果代码如下：
aIput.onmousemove = function(){
页:
[1]