suchen

Heim >Web-Frontend >js-Tutorial >js implementiert einfache Code-Javascript-Fähigkeiten für den TAB-Schiebetüreffekt

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

WBOY
WBOYOriginal
2016-05-16 15:40:361275Durchsuche

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>

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

Stellungnahme：
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
Vorheriger Artikel：jquery implementiert TAB-Wechselcode zum ersten Öffnen einer Webseite mit animierten Effekten_jqueryNächster Artikel：jquery implementiert TAB-Wechselcode zum ersten Öffnen einer Webseite mit animierten Effekten_jquery

In Verbindung stehende Artikel

Mehr sehen