Comment envelopper les boutons dans div ceux qui commutent entre divs

J'ai ce code source. Il est censé basculer entre les onglets après avoir cliqué sur l'un des boutons. Tout fonctionne bien mais quand j'essaye d'envelopper les boutons dans le div il cesse de fonctionner et il n'affiche plus le contenu. J'ai essayé tout ce qui est venu dans mon esprit .. Im coincé maintenantComment envelopper les boutons dans div ceux qui commutent entre divs

.main { 
 
    margin: 0 auto; 
 
    min-width: 320px; 
 
    max-width: 800px; 
 
} 
 

 
.content { 
 
    background: #fff; 
 
    color: #373737; 
 
} 
 

 
.content>div { 
 
    display: none; 
 
    padding: 20px 25px 5px; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    padding: 15px 25px; 
 
    font-weight: 600; 
 
    text-align: center; 
 
} 
 

 
label:hover { 
 
    color: #fff; 
 
    cursor: pointer; 
 
} 
 

 
input:checked+label { 
 
    background: #ed5a6a; 
 
    color: #fff; 
 
} 
 

 
#tab1:checked~.content #content1, 
 
#tab2:checked~.content #content2, 
 
#tab3:checked~.content #content3, 
 
#tab4:checked~.content #content4 { 
 
    display: block; 
 
}

<div class="main"> 
 
    <input id="tab1" type="radio" name="tabs" checked> 
 
    <label for="tab1">111</label> 
 

 
    <input id="tab2" type="radio" name="tabs"> 
 
    <label for="tab2">222</label> 
 

 
    <input id="tab3" type="radio" name="tabs"> 
 
    <label for="tab3">333</label> 
 

 
    <input id="tab4" type="radio" name="tabs"> 
 
    <label for="tab4">444</label> 
 

 
    <div class="content"> 
 
    <div id="content1"> 
 
     <p> 
 
     111 
 
     </p> 
 
    </div> 
 

 
    <div id="content2"> 
 
     <p> 
 
     222 
 
     </p> 
 
    </div> 
 

 
    <div id="content3"> 
 
     <p> 
 
     333 
 
     </p> 
 
    </div> 
 

 
    <div id="content4"> 
 
     <p> 
 
     444 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Le code ci-dessus fonctionne, mais je voudrais conclure cette partie dans div

<input id="tab1" type="radio" name="tabs" checked> 
      <label for="tab1">111</label> 

      <input id="tab2" type="radio" name="tabs"> 
      <label for="tab2">222</label> 

      <input id="tab3" type="radio" name="tabs"> 
      <label for="tab3">333</label> 

      <input id="tab4" type="radio" name="tabs"> 
      <label for="tab4">444</label>

Tous des idées? merci à l'avance

Source

2017-09-23 niiii

Le problème est que vous modifiez la structure du document et ce sélecteur:

#tab1:checked ~ .content #content1, 
#tab2:checked ~ .content #content2, 
#tab3:checked ~ .content #content3, 
#tab4:checked ~ .content #content4 { 
    display: block; 
}

ne correspond plus aux zones de contenu. Je ne peux pas penser à un sélecteur qui fonctionnerait parce que l'ajout de la nouvelle div rompt la relation de frère entre les onglets et le contenu. Cependant, vous pouvez ajouter votre div et simplifier le code si vous abandonnez les boutons radio cachés et les étiquettes et utilisez simplement les éléments a qui ciblent la zone de contenu censée être affichée. Ensuite, le CSS :target pseudo-class peut être utilisé pour afficher la zone de contenu actuelle qui est la cible du lien cliqué.

En outre, il n'est pas clair pourquoi vous avez le contenu réel dans un p qui est à l'intérieur du div. Cela ne semble pas nécessaire.

<!doctype html> 
 
    <html lang="en"> 
 
    <head> 
 
    \t \t <style> 
 
    \t \t .main {margin: 0 auto; min-width: 320px; max-width: 800px;} 
 
    \t \t .content {background: #fff; color: #373737;} 
 
    \t \t .content > div {display: none; padding: 20px 25px 5px;} 
 
    \t \t a {display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center;} 
 
    \t \t a:hover {color: #fff; cursor: pointer;} 
 
    \t \t a:link {background: #ed5a6a; color: #fff; text-decoration:none; } 
 
    \t \t .content > :target 
 
    \t \t { 
 
    \t \t display: block; 
 
    \t \t } 
 
    \t \t </style> 
 
    \t </head> 
 
    \t <body> 
 
    \t \t <div class="main"> 
 
      <div id="parent"> 
 
    \t \t  <a href="#content1" id="tab1">111</a> 
 
    \t \t  <a href="#content2" id="tab1">222</a> 
 
      <a href="#content3" id="tab1">333</a> 
 
    \t \t  <a href="#content4" id="tab1">444</a>    
 
         
 
    \t  </div> 
 
    \t \t <div class="content"> 
 
    \t \t \t <div id="content1">111</div> 
 
    \t \t \t <div id="content2">222</div> 
 
    \t \t \t <div id="content3">333</div> 
 
    \t \t \t <div id="content4">444</div> 
 
    \t \t </div> 
 
    \t 
 
    \t \t </div> 
 
    \t </body> 
 
    </html>

Source

2017-09-23 23:37:57

Comment envelopper les boutons dans div ceux qui commutent entre divs

Répondre

Questions connexes