<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content=""><meta name="keywords" content=""><title>Examples</title><style type="text/css"> a{text-decoration:none;color:#fff;line-height:35px;} ul li{list-style:none;} .box{width:1220px;height:489px;margin:auto;position:relative;} .box #box_img {position:relative;width:1221px;height:489px;} .box #box_img li{position:absolute;left:0px;top:0px;display:none;} .box #box2{width:220px;height:20px;position:absolute;bottom:-20px;left:50%;} .box #box2 li{background:red;width:22px;height:16px;float:left;margin:0 10px;} .box #box2 .active{background:#240F44} .box .index_left_nav{width:225px;height:467px;padding:11px 0;background: rgba(56,56,56,0.8);position:absolute;top:0px;left:0px;} .box .index_left_nav li{width:225px;height:36px;} .index_left_text{position:relative;} .index_left_px{width:198px;height:467px;background:#fff;position:absolute;left:186px;top:-27px;text-align:center;padding:11px 0;line-height:35px;display:none;}</style></head><body><div class="box"> <ul id="box_img"> <li style="display:block"><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> </ul> <ul id="box2"> <li id="active" ></li> <li></li> <li ></li> </ul> <div class="index_left_nav"> <ul> <li class="index_left_text"> <a href="#" class="action">软件培训</a> <div class="index_left_px"> <p>java</p> <p>c++</p> <p>web前端</p> <p>python</p> <p>c#</p> <p>php</p> <p>软件测试</p> <p>.net</p> <p>ios</p> <p>Android</p> </div> </li> <li class="index_left_text"> <a href="#" class="action">软件培训</a> <div class="index_left_px"> <p>java</p> <p>c++</p> <p>web前端</p> <p>python</p> <p>c#</p> <p>php</p> <p>软件测试</p> <p>.net</p> <p>ios</p> <p>Android</p> </div> </li> <li class="index_left_text"> <a href="#" class="action">软件培训</a> <div class="index_left_px"> <p>java</p> <p>c++</p> <p>web前端</p> <p>python</p> <p>c#</p> <p>php</p> <p>软件测试</p> <p>.net</p> <p>ios</p> <p>Android</p> </div> </li> <li class="index_left_text"> <a href="#" class="action">软件培训</a> <div class="index_left_px"> <p>java</p> <p>c++</p> <p>web前端</p> <p>python</p> <p>c#</p> <p>php</p> <p>软件测试</p> <p>.net</p> <p>ios</p> <p>Android</p> </div> </li> <li class="index_left_text"> <a href="#" class="action">软件培训</a> <div class="index_left_px"> <p>java</p> <p>c++</p> <p>web前端</p> <p>python</p> <p>c#</p> <p>php</p> <p>软件测试</p> <p>.net</p> <p>ios</p> <p>Android</p> </div> </li> <li class="index_left_text"> <a href="#" class="action">软件培训</a> <div class="index_left_px"> <p>java</p> <p>c++</p> <p>web前端</p> <p>python</p> <p>c#</p> <p>php</p> <p>软件测试</p> <p>.net</p> <p>ios</p> <p>Android</p> </div> </li> <li class="index_left_text"> <a href="#" class="action">软件培训</a> <div class="index_left_px"> <p>java</p> <p>c++</p> <p>web前端</p> <p>python</p> <p>c#</p> <p>php</p> <p>软件测试</p> <p>.net</p> <p>ios</p> <p>Android</p> </div> </li> </ul> </div></div><div id="text"></div> <script type="text/javascript"> var div = document.querySelectorAll(".action"); var left = document.querySelectorAll(".index_left_px"); for(var i=0;i<div.length;i++ ){ div[i].index=i; div[i].onmouseover = function(){ left[this.index].style.display = "block"; } div[i].onmouseout = function(){ left[this.index].style.display = "none"; } } var imgdemo = document.querySelectorAll(".box_img li"); var box2 = document.querySelectorAll(".box2 li"); for(var i=0;i<box2.length;i++){ box2[i].setAttribute =("xiaoqi",i); box2[i].xiaoqi = i; alert(i); } </script></body></html>怎么无法弹出框
添加回答
举报
0/150
提交
取消