Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung mehrerer Tab-Schalter

Detaillierte Erläuterung mehrerer Tab-Schalter

高洛峰
Freigeben： 2017-02-08 16:24:49
Original
1759 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich mehrere Beispielcodes für den Tab-Wechsel vorgestellt. Es hat einen sehr guten Referenzwert, schauen wir uns den Editor unten an

1. Bewegen Sie die Maus hinein und heraus, um zu wechseln

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab切换</title>
 <style type="text/css">
 * {padding: 0;margin: 0;}
 li {list-style: none;}
 .wrapper {
 margin: 0 auto;
 width: 100%;
 max-width: 1140px;
 }
 .tabbox {
 margin: 40px auto;
 width: 400px;
 height: 200px;
 border: 1px solid #f70;
 overflow: hidden;

 }
 .tabbox .tab-tit{
 position: relative;
 height: 40px;
 }
 ul {
 position: absolute;
 left: -1px;
 width: 401px;
 height: 40px;
 line-height: 40px;
 background-color: #eaeaea;
 }
 ul li {
 float: left;
 border-left: 1px solid #f70;
 border-bottom: 1px solid #f70;
 text-align: center;
 width: 99px;
 height: 40px;
 overflow: hidden;
 }
 .clear {clear: both;}
 .select {
 padding-right: 1px;
 border-bottom: none;
 background-color: #fff;
 }
 a:link, a:visited {
 font-size: 16px;
 font-weight: bold;
 color: #888;
 text-decoration: none;
 }
 .select a {
 color: #333;
 }
 a:hover, a:active {
 color: #f20;
 font-weight: bold;
 }
 .tab-txt {
 width: 400px;
 padding: 40px;
 overflow: hidden;
 }
 .demo {display: none;}
 .tab-txt p {
 line-height: 40px;
 }
 </style>
</head>
<body>
 <p class="wrapper">
 <p id="tabBox" class="tabbox">
 <p id="tabTit" class="tab-tit">
 <ul>
  <li class="select"><a href="javascript:;">女枪</a></li>
  <li><a href="javascript:;">提莫</a></li>
  <li><a href="javascript:;">盖伦</a></li>
  <li><a href="javascript:;">剑圣</a></li>
 </ul>
 </p>
 <!-- <p class="clear"></p> -->
 <p id="tabTxt" class="tab-txt">
 <p class="demo" style="display: block;">
  <p>我有两把枪，一把叫射，另一把叫，啊~</p>
  <p>你有一双迷人的眼睛，我非常喜欢！</p>
 </p>
 <p class="demo">
  <p>我去前面探探路</p>
  <p>提莫队长正在待命！</p>
 </p>
 <p class="demo">
  <p>放马过来吧，你会死的很光荣的！</p>
  <p>快点儿结束吧，我头有点儿转晕了……</p>
 </p>
 <p class="demo">
  <p>我的剑就是你的剑。</p>
  <p>眼睛多，看东西才会更加清楚</p>
 </p>
 </p>
 </p>
 </p>
 <script type="text/javascript">
 function $(id) {
 return typeof id === "string" ? document.getElementById(id) : id;
 }
 window.onload = function() {
 var tits = $("tabTit").getElementsByTagName("li");
 var txts = $("tabTxt").getElementsByClassName("demo");
 if(tits.length != txts.length) {return;}
 for(var i=0,l=tits.length; i<l; i++) {
 tits[i].id = i;
 tits[i].onmouseover = function() {
  for(var j=0; j<l; j++) {
  tits[j].className = "";
  txts[j].style.display = "none";
  }
  this.className = "select";
  txts[this.id].style.display = "block";
 }
 }
 }
 </script>
</body>
</html>
Nach dem Login kopieren


2. Verzögerung beim Ein- und Ausfahren der Maus


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab切换之延时切换</title>
 <style type="text/css">
 * {padding: 0;margin: 0;}
 li {list-style: none;}
 .wrapper {
 margin: 0 auto;
 width: 100%;
 max-width: 1140px;
 }
 .tabbox {
 margin: 40px auto;
 width: 400px;
 height: 200px;
 border: 1px solid #f70;
 overflow: hidden;
 }
 .tabbox .tab-tit{
 position: relative;
 height: 40px;
 }
 ul {
 position: absolute;
 left: -1px;
 width: 401px;
 height: 40px;
 line-height: 40px;
 background-color: #eaeaea;
 }
 ul li {
 float: left;
 border-left: 1px solid #f70;
 border-bottom: 1px solid #f70;
 text-align: center;
 width: 99px;
 height: 40px;
 overflow: hidden;
 }
 .clear {clear: both;}
 .select {
 padding-right: 1px;
 border-bottom: none;
 background-color: #fff;
 }
 a:link, a:visited {
 font-size: 16px;
 font-weight: bold;
 color: #888;
 text-decoration: none;
 }
 .select a {
 color: #333;
 }
 a:hover, a:active {
 color: #f20;
 font-weight: bold;
 }
 .tab-txt {
 width: 400px;
 padding: 40px;
 overflow: hidden;
 }
 .demo {display: none;}
 .tab-txt p {
 line-height: 40px;
 }
 </style>
</head>
<body>
 <p class="wrapper">
 <p id="tabBox" class="tabbox">
 <p id="tabTit" class="tab-tit">
 <ul>
  <li class="select"><a href="javascript:;">女枪</a></li>
  <li><a href="javascript:;">提莫</a></li>
  <li><a href="javascript:;">盖伦</a></li>
  <li><a href="javascript:;">剑圣</a></li>
 </ul>
 </p>
 <!-- <p class="clear"></p> -->
 <p id="tabTxt" class="tab-txt">
 <p class="demo" style="display: block;">
  <p>我有两把枪，一把叫射，另一把叫，啊~</p>
  <p>你有一双迷人的眼睛，我非常喜欢！</p>
 </p>
 <p class="demo">
  <p>我去前面探探路</p>
  <p>提莫队长正在待命！</p>
 </p>
 <p class="demo">
  <p>放马过来吧，你会死的很光荣的！</p>
  <p>快点儿结束吧，我头有点儿转晕了……</p>
 </p>
 <p class="demo">
  <p>我的剑就是你的剑。</p>
  <p>眼睛多，看东西才会更加清楚</p>
 </p>
 </p>
 </p>
 </p>
 <script type="text/javascript">
 function $(id) {
 return typeof id === "string" ? document.getElementById(id) : id;
 }
 window.onload = function() {
 var timer = null;
 var tits = $("tabTit").getElementsByTagName("li");
 var txts = $("tabTxt").getElementsByClassName("demo");
 if(tits.length != txts.length) {return;}
 for(var i=0,l=tits.length; i<l; i++) {
 tits[i].id = i;
 tits[i].onmouseover = function() {
  var that = this;
  if(timer) {
  clearTimeout(timer);
  timer = null;
  }
  timer = setTimeout(function() {
  for(var j=0; j<l; j++) {
    tits[j].className = "";
    txts[j].style.display = "none";
  }
  that.className = "select";
  txts[that.id].style.display = "block";
  },500);
 } 
 }
 }
 </script>
</body>
</html>
Nach dem Login kopieren


3. Tab automatischer Wechsel, bewegen Sie die Maus hinein und heraus, um sofort zu wechseln


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>tab切换之自动切换</title>
 <style type="text/css">
 * {padding: 0;margin: 0;}
 li {list-style: none;}
 .wrapper {
 margin: 0 auto;
 width: 100%;
 max-width: 1140px;
 }
 .tabbox {
 margin: 40px auto;
 width: 400px;
 height: 200px;
 border: 1px solid #f70;
 overflow: hidden;
 }
 .tabbox .tab-tit{
 position: relative;
 height: 40px;
 }
 ul {
 position: absolute;
 left: -1px;
 width: 401px;
 height: 40px;
 line-height: 40px;
 background-color: #eaeaea;
 }
 ul li {
 float: left;
 border-left: 1px solid #f70;
 border-bottom: 1px solid #f70;
 text-align: center;
 width: 99px;
 height: 40px;
 overflow: hidden;
 }
 .clear {clear: both;}
 .select {
 padding-right: 1px;
 border-bottom: none;
 background-color: #fff;
 }
 a:link, a:visited {
 font-size: 16px;
 font-weight: bold;
 color: #888;
 text-decoration: none;
 }
 .select a {
 color: #333;
 }
 a:hover, a:active {
 color: #f20;
 font-weight: bold;
 }
 .tab-txt {
 width: 400px;
 padding: 40px;
 overflow: hidden;
 }
 .demo {display: none;}
 .tab-txt p {
 line-height: 40px;
 }
 </style>
</head>
<body>
 <p class="wrapper">
 <p id="tabBox" class="tabbox">
 <p id="tabTit" class="tab-tit">
 <ul>
  <li class="select"><a href="javascript:;">女枪</a></li>
  <li><a href="javascript:;">提莫</a></li>
  <li><a href="javascript:;">盖伦</a></li>
  <li><a href="javascript:;">剑圣</a></li>
 </ul>
 </p>
 <!-- <p class="clear"></p> -->
 <p id="tabTxt" class="tab-txt">
 <p class="demo" style="display: block;">
  <p>我有两把枪，一把叫射，另一把叫，啊~</p>
  <p>你有一双迷人的眼睛，我非常喜欢！</p>
 </p>
 <p class="demo">
  <p>我去前面探探路</p>
  <p>提莫队长正在待命！</p>
 </p>
 <p class="demo">
  <p>放马过来吧，你会死的很光荣的！</p>
  <p>快点儿结束吧，我头有点儿转晕了……</p>
 </p>
 <p class="demo">
  <p>我的剑就是你的剑。</p>
  <p>眼睛多，看东西才会更加清楚</p>
 </p>
 </p>
 </p>
 </p>
 <script type="text/javascript">
 function $(id) {
 return typeof id === "string" ? document.getElementById(id) : id;
 }
 window.onload = function() {
 var index = 0;
 var timer = null;
 var tits = $("tabTit").getElementsByTagName("li");
 var txts = $("tabTxt").getElementsByClassName("demo");
 if(tits.length != txts.length) {return;}
 for(var i=0,l=tits.length; i<l; i++) {
 tits[i].id = i;
 tits[i].onmouseover = function() {
  clearInterval(timer);
  styleFun(this.id);
 }
 tits[i].onmouseout = function() {
  timer = setInterval(autoPlay, 2000);
 }
 }
 //在开启定时器的同时清楚定时器并置空
 if(timer) {
 clearInterval(timer);
 timer = null;
 }
 timer = setInterval(autoPlay, 2000);
 function autoPlay() {
 index++;
 if(index >= tits.length) {
  index = 0;
 }
 styleFun(index);
 }
 function styleFun(ele) {
 for(var j=0,m=tits.length; j<m; j++) {
  tits[j].className = "";
  txts[j].style.display = "none";
 }
 tits[ele].className = "select";
 txts[ele].style.display = "block";
 //将鼠标移入移出时的index传给autoPlay;
 index = ele;
 }
 }
 </script>
</body>
</html>
Nach dem Login kopieren


4 . Beispiel zum Wechseln von Werbesäulen


<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 list-style: none;
 }
 .wrap {
 height: 170px;
 width: 490px;
 margin: 20px auto;
 overflow: hidden;
 position: relative;
 margin: 100px auto;
 }
 .wrap ul {
 position: absolute;
 }
 .wrap ul li {
 height: 170px;
 }
 .wrap ol {
 position: absolute;
 right: 5px;
 bottom: 10px;
 }
 .wrap ol li {
 height: 20px;
 width: 20px;
 background: #ccc;
 border: solid 1px #666;
 margin-left: 5px;
 color: #000;
 float: left;
 line-height: center;
 text-align: center;
 cursor: pointer;
 }
 .wrap ol .on {
 background: #E97305;
 color: #fff;
 }
 </style>
 <script type="text/javascript">
 window.onload = function() {
 var wrap = document.getElementById(&#39;wrap&#39;),
  pic = document.getElementById(&#39;pic&#39;),
  piclist = pic.getElementsByTagName(&#39;li&#39;),
  list = document.getElementById(&#39;list&#39;).getElementsByTagName(&#39;li&#39;),
  picheight = 170,
  index = 0,
  timer = null;
 if(piclist.length != list.length) {
  return;
 }
 // 定义并调用自动播放函数
 if(timer) {
  clearInterval(timer);
  timer = null;
 }
 timer = setInterval(picFunc, 2000);
 function picFunc() {
  index++;
  if(index >= piclist.length) {
  index = 0;
  }
  changePic(index);
 }
 // 定义图片切换函数
 function changePic(ele) {
  for(var j = 0, m = piclist.length; j < m; j++) {
  list[j].className = "";
  }
  pic.style.top = -ele * picheight + "px";
  list[ele].className = "on";
  index = ele;
 }
 // 鼠标划过整个容器时停止自动播放
 wrap.onmouseover = function() {
  clearInterval(timer);
  }
  // 鼠标离开整个容器时继续播放至下一张
 wrap.onmouseout = function() {
  timer = setInterval(picFunc, 2000);
  }
  // 遍历所有数字导航实现划过切换至对应的图片
 for(var i = 0, l = list.length; i < l; i++) {
  list[i].id = i;
  list[i].onmouseover = function() {
  changePic(this.id);
  }
 }
 }
 </script>
 </head>
 <body>
 <p class="wrap" id=&#39;wrap&#39;>
 <ul id="pic">
 <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
 <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
 <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
 <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
 <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
 </ul>
 <ol id="list">
 <li class="on">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ol>
 </p>
 </body>
</html>
Nach dem Login kopieren

Ausführlichere Erläuterungen zu verschiedenen Artikeln zum Wechseln von Tabs finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten：
tab切换
Quelle：php.cn
Vorheriger Artikel：Die Verwendung von js Timer (Erklärung mit Beispielen) Nächster Artikel：Tab-Wechseleffekte, die häufig in js verwendet werden
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Die Statusaktualisierung funktioniert in React-Native auf Android nicht Ich habe einen Code, der Bildpaare in einer wischbaren horizontalen Galerie enthält. Wenn ...
Aus 2024-04-06 16:54:10
0
1
410
Ausgeblendete Seitenbereiche anzeigen: aktiviert Ich hätte gerne ein Navigationsmenü im Seitenbereich mit der Möglichkeit, über ein animier...
Aus 2024-04-06 15:49:33
0
1
319
Der beste Weg, um eine Drei-Zustands-Umschaltung in React zu implementieren? Ich erstelle in React einige Schaltflächen, die eine Zustandsänderung von einer zur nächst...
Aus 2024-04-06 13:51:32
0
1
418
Vite/Vue 3: „Undefinierte Anforderung' bei Verwendung der Bildquelle als Requisite Ich bin von VueCLI zu ViteCLI und von Vue3s CompositionAPI zu SFCScriptsetupAPI gewechselt...
Aus 2024-04-06 09:50:25
0
1
353
Warum bleiben meine Kontrollkästchen immer noch hängen und können nicht auf ihre Standardwerte zurückgesetzt werden? Ich habe gerade diese Funktion erstellt, um den Seitentitel nach dem Klicken auf die Umsch...
Aus 2024-04-04 00:14:23
0
1
390
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage