Code problématique ici:
#container { /*CSS part*/
width: 606px;
height: 400px;
border: 1px #434343 solid;
border-radius: 7px;
border-top: none;
}
#tabs {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid;
cursor: pointer;
border-radius: 7px 7px 0 0;
}
#content {
height: 300px;
text-align: center;
}
.subtab {
display: none;
text-align: center;
height: 100%;
}
#tab1 {
background-color: blue;
}
#tab2 {
background-color: red;
}
#tab3 {
background-color: green;
}
#blue {
background-color: blue;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
<div id="container"> <!-- html part -->
<ul id="tabs">
<li id="blue">blue</li>
<li id="red">red</li>
<li id="green">green</li>
</ul>
<div id="content">
<div id="tab1" class="subtab">This is tab1!</div>
<div id="tab2" class="subtab">This is tab2!</div>
<div id="tab3" class="subtab">This is tab3!</div>
</div>
var tablist = document.getElementById('tabs').children; //js part
var sublist = document.getElementsByClassName('subtab');
for (var i = 0; i < tablist.length; i++) {
tablist[i].index = i; //保存每次迭代的i值
tablist[i].addEventListener('click', function () {
for (var x = 0; x < sublist.length; x++) {
sublist[x].style.display = 'none';
}
sublist[this.index].style.display = 'block';
this.style.borderBottom = 'none';
})
}
Désolé, la partie html ne semble pas correcte, le démarquage est toujours une douleur pour moi.
Code complet ici démo
La chose étrange est la position du texte du contenu de l'onglet (classe de sous-onglet), si vous cliquez dans un ordre bleu-> rouge-> vert, le texte s'affiche bien au centre, cependant, si vous cliquez d'abord sur le vert, le texte apparaîtra aligné à droite, puis vous cliquez sur bleu puis vous constaterez que la position du texte sera au bon endroit.
Il y a plusieurs situations à ce sujet, mais c'est essentiellement le problème.
Pourquoi??
5 réponses
Le problème est dû à la hauteur de l'élément <ul>
(le conteneur tabs). Vous avez précisé:
#tabs {
height: 100px;
}
Et
#tabs li {
height: 100px;
}
Mais vous n'avez pas pris en compte les 2 pixels supplémentaires pour les bordures .
Réparer
Pour résoudre ce problème, remplacez la hauteur de l'élément <ul>
par 102px
:
#tabs {
height: 102px;
...
}
J'ai apporté quelques modifications à votre identifiant #content en spécifiant la position et la largeur et cela devrait bien fonctionner maintenant:
#content {
height: 300px;
text-align: center;
position: absolute;
width: inherit;
}
C'est un problème de dimensionnement de boîte, vous pouvez résoudre ce problème en ajoutant la classe ci-dessous à votre CSS
div#container, div#container * {
box-sizing: border-box;
}
Vous pouvez en savoir plus sur le dimensionnement des boîtes https://css-tricks.com/box-sizing/
Voici un Jsfiddle de travail
Vous venez d'ajouter position:absolute;
et width:100%;
à votre .subtab
règle CSS
Ci-dessous est l'extrait de code.
Le sous-onglet final est
.subtab {
display: none;
height: 100%;
text-align: center;
position:absolute;
width:100%;
}
var tablist = document.getElementById('tabs').children;
var sublist = document.getElementsByClassName('subtab');
for (var i = 0; i < tablist.length; i++) {
tablist[i].index = i; //store the i value for every iteration
tablist[i].addEventListener('click', function () {
for (var x = 0; x < sublist.length; x++) {
sublist[x].style.display = 'none';
}
sublist[this.index].style.display = 'block';
this.style.borderBottom = 'none';
})
}
#container {
width: 606px;
height: 400px;
border: 1px #434343 solid;
border-radius: 7px;
border-top: none;
}
#tabs {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
float: left;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid;
cursor: pointer;
border-radius: 7px 7px 0 0;
}
#content {
height: 300px;
text-align: center;
}
.subtab {
display: none;
height: 100%;
text-align: center;
position:absolute;
width:100%;
}
#tab1 {
background-color: blue;
}
#tab2 {
background-color: red;
}
#tab3 {
background-color: green;
}
#blue {
background-color: blue;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
<body>
<h1>simple tab</h1>
<div id="container">
<ul id="tabs">
<li id="blue">blue</li>
<li id="red">red</li>
<li id="green">green</li>
</ul>
<div id="content">
<div id="tab1" class="subtab">This is tab1!</div>
<div id="tab2" class="subtab">This is tab2!</div>
<div id="tab3" class="subtab">This is tab3!</div>
</div>
</div>
</body>
Je viens d'ajouter la règle text-align
à la classe .subtab
, comme ceci:
.subtab {
display: none;
text-align: center;
height: 100%;
}
Puis, dans le JS, commentez le
this.style.borderBottom = 'none';
A parfaitement fonctionné
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.