网页里滑动门的基本代码

最新推荐文章于 2021-06-09 19:16:01 发布

原创最新推荐文章于 2021-06-09 19:16:01 发布 · 760 阅读

1 ·

CC 4.0 BY-SA版权

代码专栏收录该内容

16 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>

<body>
<div id="box">
<ul>
    <li class="red"><a href="#"><h2>机票</h2></a></li>
        <li class="normal"><a href="#"><h2>酒店</h2></a></li>
        <li class="normal"><a href="#"><h2>商场</h2></a></li>
</ul>
<div id="div0">此处显示 id "div0" 的内容</div>
<div id="div1">此处显示 id "div1" 的内容</div>
<div id="div2">此处显示 id "div2" 的内容</div>
</div>
<script type="text/javascript">
function set(){
var lis=document.getElementById("box").getElementsByTagName("ul")[0].getElementsByTagName("li");
for (var i=0;i<lis.length;i++){
  var newMouseover=new mouseover(i);
  lis[i].onmouseover=newMouseover.m
}
}
function mouseover(arg){
this.m=function(){
over(this,arg);
}
}
set();
function over(x,n){
var lis=document.getElementById("box").getElementsByTagName("ul")[0].getElementsByTagName("li");
for (var i=0;i<lis.length;i++){
  if(i==n){
  x.className="red";
  document.getElementById("div"+i).style.display="block";
  }else{
   lis[i].className="normal";
   document.getElementById("div"+i).style.display="none";
  }
}
}
</script>
</body>
</html>