<!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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于BootStrap的文本編輯器組件Summernote
Summernote是一個基于jquery的bootstrap超級簡單WYSIWYG在線編輯器。這篇文章主要介紹了基于BootStrap的文本編輯器組件Summernote的相關(guān)資料,需要的朋友可以參考下
2017-10-10
利用JavaScript實(shí)現(xiàn)簡單3D開關(guān)書本模型
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)簡單3D開關(guān)書本模型的效果,文中的實(shí)現(xiàn)代碼講解的非常詳細(xì),具有一定參考價值,感興趣的同學(xué)可以動手嘗試一下
2023-11-11
JS不間斷向上滾動效果代碼
不間斷向上滾動的效果，想必大家都有見到過吧，本文也為大家準(zhǔn)備一個使用js實(shí)現(xiàn)的不間斷向上滾動效果，感興趣的朋友可以參考下
2013-12-12
詳解javascript中的Strict模式
我們都知道javascript是一個弱類型語言，在ES5之前，javascript的程序編寫具有很強(qiáng)的隨意性，我可以稱之為懶散模式（sloppy mode）。比如可以使用未定義的變量，可以給對象中的任意屬性賦值并不會拋出異常等等。本文將詳細(xì)介紹javascript中的Strict模式。
2021-06-06
基于Turn.js 實(shí)現(xiàn)翻書效果實(shí)例解析
最近項(xiàng)目經(jīng)理我個項(xiàng)目練練手，其項(xiàng)目需求是要實(shí)現(xiàn)翻書效果，看到這個需求后，我真是懵了，這咋整，我可是java出身的啊，這個問題真是難住我了，后來有同事的指導(dǎo)，問題順利解決，下面小編把學(xué)習(xí)心得分享，感興趣的朋友可以參考下
2016-06-06
layui 彈出層值回傳解決方式
今天小編就為大家分享一篇layui 彈出層值回傳解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
JS hasOwnProperty()方法檢測一個屬性是否是對象的自有屬性的方法
這篇文章主要介紹了JS hasOwnProperty()方法檢測一個屬性是否是對象的自有屬性的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
精彩的Bootstrap案例分享重點(diǎn)在注釋!(選項(xiàng)卡、柵格布局)
這篇文章主要為大家分享了一個精彩的Bootstrap案例，涉及到了選項(xiàng)卡、柵格布局，關(guān)鍵重點(diǎn)在注釋，感興趣的小伙伴們可以參考一下
2016-07-07
JavaScript實(shí)現(xiàn)tab欄切換的幾種常用方法
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)tab欄切換的幾種常用方法,在Web開發(fā)中Tab切換是一個常見的功能,它允許用戶在不同的頁面部分之間進(jìn)行切換,需要的朋友可以參考下
2023-12-12
深入了解JavaScript中遞歸的理解與實(shí)現(xiàn)
本文將通過遞歸的經(jīng)典案例：求斐波那契數(shù)來講解遞歸，通過畫遞歸樹的方式來講解其時間復(fù)雜度和空間復(fù)雜度以及遞歸的執(zhí)行順序，感興趣的可以了解一下
2022-06-06