Maison > interface Web > tutoriel CSS > le corps du texte

Implémenter l'effet de commutation de la barre d'onglets dans DOM

一个新手
Libérer: 2017-09-06 13:15:57
original
1877 Les gens l'ont consulté

Ce n'est pas joli, mais je veux mettre ce code js et jouer avec moi-même.

<style type="text/css">
      .Box {
      width: 240px;
      border: 1px solid #000;
      margin: 100px auto;
      padding: 20px;
    }
Copier après la connexion
.con {
      width: 100%;
      height: 200px;
      background-color: #cccccc;
      border: 1px solid #000;
      margin-top: 10px;
      display: none;
    }
Copier après la connexion
.current {
       background-color: #EEC900;
   }
Copier après la connexion
<p class="Box" id="box">        
<button class="current">one</button>        
<button>two</button>         
<button>three</button>         
<button>four</button>
<p class="con" style="display:block">one</p>         
<p class="con">two</p>         
<p class="con">three</p>        
<p class="con">four</p>
Copier après la connexion
<script>
  var box=document.getElementById("box");
  var btns=box.getElementsByTagName("button");
  var ps=box.getElementsByTagName("p");
  for(var i = 0 ; i<btns.length; i++){
  btns[i].setAttribute("index",i);
  btns[i].onclick=function(){
  for(var j =0 ; j<btns.length ; j++){
  btns[j].removeAttribute("class");
  ps[j].style.display="none";
}
  this.setAttribute("class","current");
  ps[this.getAttribute("index")].style.display="block";
}
}
</script>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
dom
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal