<!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>
怎么无法弹出框
习惯受伤
相关分类