原生javascript选项卡鼠标点击移过实现效果代码

admin

原生javascript选项卡鼠标点击移过实现效果代码
首先html代码

1. <div id="container">
   
2. 　　<input type="button" id="btn1" value="黄色" class="active">
   
3. 　　<input type="button" id="btn2" value="红色">
   
4. 　　<input type="button" id="btn3" value="绿色">
   
5. 　　<input type="button" id="btn4" value="褐色">
   
6. 　　<div id="cont">　　　
   
7. 
   
8. 　　　　<div style="display: block;">111</div>
   
9. 　　　　<div>222</div>
   
10. 　　　　<div>333</div>
    
11. 　　　　<div>444</div>
    
12. 
    
13. 　　</div>
    
14. </div>

复制代码

简单的css代码：

1. * { margin: 0; padding: 0; }
   
2. #container { width: 204px; margin: 0 auto; }
   
3. #container .active { background-color: yellow }
   
4. #cont { width: 200px; height: 200px; border: 1px solid #333; background-color: #999 }
   
5. #cont div { display: none; }

复制代码

重点的js代码：

1. window.onload = function(){
   
2. 　　var oContainer = document.getElementById("container");
   
3. 　　var aIput = oContainer.getElementsByTagName("input");
   
4. 　　var oCont = document.getElementById("cont");
   
5. 　　var aDiv = oCont.getElementsByTagName("div");
   
6. 
   
7. 　　for( var i = 0; i < aIput.length; i ++ ){
   
8. 　　　　aIput[i].index = i;
   
9. 　　　　aIput[i].onclick = function(){
   
10. 　　　　　　for( var i = 0; i < aIput.length; i ++ ){
    
11. 　　　　　　　　aIput[i].className = "";
    
12. 　　　　　　　　aDiv[i].style.display = "none"
    
13. 　　　　　　}
    
14. 　　　　　　this.className = "active";
    
15. 　　　　　　aDiv[this.index].style.display = "block"
    
16. 　　　　}
    
17. 　　}
    
18. }

复制代码

原生javascript选项卡鼠标点击移过实现效果代码

点击改移动效果代码如下：

1. aIput[i].onmousemove = function(){

复制代码