<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 * {
  padding: 0;
  margin: 0;
 }
 .box {
  width: 500px;
  height: 400px;
  border: 1px solid #ccc;
  margin: 100px auto;
  overflow: hidden;
 }
 ul {
  width: 600px;
  height: 40px;
  margin-left: -1px;
  list-style: none;
 }
 li {
  float: left;
  width: 101px;
  height: 40px;
  text-align: center;
  font: 600 18px/40px "simsun";
  background-color: pink;
  cursor: pointer;
 }
 span {
  display: none;
  width: 500px;
  height: 360px;
  background-color: yellow;
  text-align: center;
  font: 700 150px/360px "simsun";
 }
 .show {
  display: block;
 }
 .current {
  background-color: yellow;
 }
 </style>

 <script>
 window.onload = function () {
  var boxArr = document.getElementsByClassName("box");
  for(var i=0;i<boxArr.length;i++){
  fn(boxArr[i]);
  }
  function fn(ele){
  var liArr = ele.getElementsByTagName("li");
  var spanArr = ele.getElementsByTagName("span");
  for(var i=0;i<liArr.length;i++){
   liArr[i].index = i;
   liArr[i].onmouseover = function () {
   for(var j=0;j<liArr.length;j++){
    liArr[j].className = "";
    spanArr[j].className = "";
   }
   this.className = "current";
   spanArr[this.index].className = "show";
   }
  }
  }
 }
 </script>
</head>
<body>

 <div class="box">
 <ul>
  <li class="current">鞋子</li>
  <li>襪子</li>
  <li>帽子</li>
  <li>褲子</li>
  <li>裙子</li>
 </ul>
 <span class="show">鞋子</span>
 <span>襪子</span>
 <span>帽子</span>
 <span>褲子</span>
 <span>裙子</span>
 </div>

 <div class="box">
 <ul>
  <li class="current">鞋子</li>
  <li>襪子</li>
  <li>帽子</li>
  <li>褲子</li>
  <li>裙子</li>
 </ul>
 <span class="show">鞋子</span>
 <span>襪子</span>
 <span>帽子</span>
 <span>褲子</span>
 <span>裙子</span>
 </div>

 <div class="box">
 <ul>
  <li class="current">鞋子</li>
  <li>襪子</li>
  <li>帽子</li>
  <li>褲子</li>
  <li>裙子</li>
 </ul>
 <span class="show">鞋子</span>
 <span>襪子</span>
 <span>帽子</span>
 <span>褲子</span>
 <span>裙子</span>
 </div>

</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: