基于JavaScript實現(xiàn)Tab選項卡切換效果

更新時間：2016年11月24日 14:23:56 作者：華哥愛學習

這篇文章主要介紹了基于JavaScript實現(xiàn)Tabs選項卡切換效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了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>

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

您可能感興趣的文章: