지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

여러 탭 스위치에 대한 자세한 설명

高洛峰
풀어 주다： 2017-02-08 16:24:49
원래의
1739명이 탐색했습니다.

이 글에서는 주로 탭 전환을 위한 여러 샘플 코드를 공유합니다. 참고값이 아주 좋은데 아래 에디터로 살펴보겠습니다

1. 마우스를 안쪽으로 움직여 스위치

<!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>
로그인 후 복사


2. 마우스가 들어오고 나갈 때 전환이 지연됩니다


<!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>
로그인 후 복사


3. 마우스가 들어오면 탭이 자동으로 전환됩니다. 나가서 바로 전환하세요


<!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>
로그인 후 복사


4. 🎜>


<!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>
로그인 후 복사
다양한 탭 전환 관련 글에 대한 자세한 설명은 PHP 중국어 홈페이지를 주목해주세요!

관련 라벨：
tab切换
원천：php.cn
이전 기사：js 타이머 사용(예제 설명) 다음 기사：js에서 흔히 사용되는 탭 전환 효과
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Android의 React-Native에서 상태 업데이트가 작동하지 않습니다. 스와이프할 수 있는 가로 갤러리에 이미지 쌍이 있는 코드가 있습니다. 이제 두 이미지의 위쪽 부분을 클릭하면 이미지가 꺼지므로 isImage2Active를 상태로...
에서 2024-04-06 16:54:10
0
1
410
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
반응으로 3상태 스위칭을 구현하는 가장 좋은 방법은 무엇입니까? 나는 하나에서 다음으로 상태 변경을 트리거하는 몇 가지 버튼을 React에서 만들고 있습니다. 내 버튼 중 일부에는 열거형으로 표시되는 세 가지 상태가 있습니다....
에서 2024-04-06 13:51:32
0
1
418
Vite/Vue 3: 이미지 소스를 소품으로 사용할 때 "정의되지 않은 요구 사항" VueCLI에서 ViteCLI로, Vue3의 CompositionAPI에서 SFCScriptsetupAPI로 전환했습니다. 이전에 어떻게 작동했는지 공식 VueC...
에서 2024-04-06 09:50:25
0
1
353
확인란이 여전히 멈춰 있고 기본값으로 돌아갈 수 없는 이유는 무엇입니까? 방금 토글 버튼을 클릭한 후 페이지 제목을 변경하기 위해 이 기능을 만들었는데, 어떤 이유에서인지 클릭하면 멈춥니다. 이 함수에 어떤 문제가 있는지 잘 모르겠습니...
에서 2024-04-04 00:14:23
0
1
390
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿