基于JavaScript实现Tab选项卡切换效果

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

基础教程