js implémente des compétences code_javascript d'effet de porte coulissante TAB simples-js tutoriel-php.cn

js implémente des compétences code_javascript d'effet de porte coulissante TAB simples

WBOY

Libérer： 2016-05-16 15:40:36

original

1275 Les gens l'ont consulté

L'exemple de cet article décrit le simple code d'effet de porte coulissante TAB implémenté dans js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un code de porte coulissante, d'une simple TAB, d'un simple effet de navigation avec la souris, que vous pouvez souvent voir lorsque la souris est placée sur le menu principal, le contenu du cadre ci-dessous changera en conséquence et la souris n'en aura pas besoin. pour être cliqué. Il vous suffit de le faire glisser vers le haut pour changer de contenu, comme une porte, alors parfois d'autres l'appellent un menu « porte coulissante ».

L'effet de l'opération est comme indiqué ci-dessous :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

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

Copier après la connexion

J'espère que cet article sera utile à la programmation JavaScript de chacun.