いくつかのタブスイッチの詳細な説明-jsチュートリアル-php.cn

いくつかのタブスイッチの詳細な説明

高洛峰

リリース： 2017-02-08 16:24:49

オリジナル

1759 人が閲覧しました

この記事では主にタブ切り替えのサンプルコードをいくつか紹介します。非常に優れた参考値です。下のエディターで見てみましょう

1. マウスのインとアウトの切り替え

2. マウスのインとアウトの遅延切り替え

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

ログイン後にコピー

4. 各種タブの詳しい説明はこちら関連記事を切り替えるには、PHP 中国語ネットにご注意ください。