js implementiert einfache Code-Javascript-Fähigkeiten für den TAB-Schiebetüreffekt-js-Tutorial-php.cn

js implementiert einfache Code-Javascript-Fähigkeiten für den TAB-Schiebetüreffekt

WBOY

Freigeben： 2016-05-16 15:40:36

Original

1273 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den einfachen TAB-Schiebetüreffektcode, der in js implementiert ist. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein Schiebetürcode, eine einfache TAB-Taste und ein einfacher Mausnavigationseffekt, den Sie möglicherweise häufig sehen. Wenn die Maus im Hauptmenü platziert wird, ändert sich der Inhalt im Rahmen unten entsprechend und die Maus muss nicht verwendet werden Zum Anklicken muss man es nur nach oben schieben, um den Inhalt zu wechseln, wie bei einer Tür, weshalb andere es manchmal auch als „Schiebetür“-Menü bezeichnen.

Der Betriebseffekt ist wie folgt:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-tab-simple-cha-style-codes/

Der spezifische Code lautet wie folgt:

<html>
<head>
 <title>简洁TAB</title>
 <script type="text/javascript">
 function nTabs(thisObj, Num) {
  if (thisObj.className == "active") return;
  var tabObj = thisObj.parentNode.id;//赋值指定节点的父节点的id名字
  var tabList = document.getElementById(tabObj).getElementsByTagName("li");
  for (i = 0; i < tabList.length; i++) {//点击之后，其他tab变成灰色，内容隐藏，只有点击的tab和内容有属性
  if (i == Num) {
   thisObj.className = "active";
   document.getElementById(tabObj + "_Content" + i).style.display = "block";
  } else {
   tabList[i].className = "normal";
   document.getElementById(tabObj + "_Content" + i).style.display = "none";
  }
  }
 }
 </script>
 <style type="text/css">
 *
 {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
 }
 .nTab
 {
  width: 500px;
  height:200px;
  margin: 20px auto;
  border: 1px solid #333;
  overflow: hidden;
 }
 .none
 {
  display: none;
 }
 .nTab .TabTitle li
 {
  float: left;
  cursor: pointer;
  height: 35px;
  line-height: 35px;
  font-weight: bold;
  text-align: center;
  width: 124px;
 }
 .nTab .TabTitle li a
 {
  text-decoration: none;
 }
 .nTab .TabTitle .active
 {
  background-color:blue;
  color: #336699;
 }
 .nTab .TabTitle .normal
 {
  color: #F1AC1C;
 }
 .nTab .TabContent
 {
  clear: both;
  overflow: hidden;
  background: #fff;
  padding: 5px;
  display: block;
  height:100px;
 }
 </style>
</head>
<body>
 <div class="nTab">
 <div class="TabTitle">
  <ul id="myTab">
  <li class="active" onmouseover="nTabs(this,0);">ASP</li>
  <li class="normal" onmouseover="nTabs(this,1);">PHP2</li>
  <li class="normal" onmouseover="nTabs(this,2);">PHP3</li>
  <li class="normal" onmouseover="nTabs(this,3);">PHP4</li>
  </ul>
 </div>
 <div class="TabContent" >
  <div id="myTab_Content0">
  第一块内容</div>
  <div id="myTab_Content1" class="none">
  第二块内容</div>
  <div id="myTab_Content2" class="none">
  第三块内容</div>
  <div id="myTab_Content3" class="none">
  第四块内容</div>
 </div>
 </div>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.