Id Variable für CSS-Style

Question

Ich habe den nächsten PHP-Code zu einer foreach-Schleife, wobei $ d-> ID-Variable ist:

echo '<div id="tabla_'.$d->ID.'" style="display:none">'; 
echo '<input id="tab-1_'.$d->ID.'" type="radio" name="tab-group'.$d->ID.'" checked="checked"/> 
<label for="tab-1_'.$d->ID.'">Tab 1</label> 
<input id="tab-2_'.$d->ID.'" type="radio" name="tab-group'.$d->ID.'" /> 
<label for="tab-2_'.$d->ID.'">Tab2 2</label> 
<div id="content_'.$d->ID.'">  
<div id="content-1_'.$d->ID.'">'; 
echo 'Hello world 1</div> 
<div id="content-2_'.$d->ID.'">Hello world 2!</div></div></div><br>'; 

Jetzt habe ich Css Stil mit dem nächsten Code (Dieser Arbeit gut!):

div[id^=tabla_] { 
margin: 40px auto; 
width: 100%; /* Ancho del contenedor */ 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
} 

div[id^=tabla_] input { 
height: 32px; 
visibility: hidden; 
} 

div[id^=tabla_] label { 
float: left; 
cursor: pointer; 
font-size: 15px; /* Tamaño del texto de las pestañas */ 
line-height: 40px; 
height: 40px; 
padding: 0 20px; 
display: block; 
color: #888; /* Color del texto de las pestañas */ 
text-align: center; 
border-radius: 5px 5px 0 0; 
background: #eee; /* Fondo de las pestañas */ 
margin-right: 5px; 
} 

aber jetzt habe ich den nächsten Code, der :(

div[id^=tabla_] input[id^=tab-1_]:checked ~ [id^=content_] [id^=content-1_], 
div[id^=tabla_] input[id^=tab-2_]:checked ~ [id^=content_] [id^=content-2_]{ 
    z-index: 100; 
    opacity: 1; 
    -webkit-transition: all ease-out 0.2s 0.1s; 
-moz-transition: all ease-out 0.2s 0.1s; 
-o-transition: all ease-out 0.2s 0.1s; 
-ms-transition: all ease-out 0.2s 0.1s; 
} 

eine Idee nicht funktionieren

?

Vielen Dank!

Answer 1

Sie setzen niemals eine Deckkraft für das (nicht markierte) [id^=content_] [id^=content-1_], so dass es immer gleich 1 ist (wie dies der Standard des Browsers ist).

ein

[id^=content_] [id^=content-1_], 
[id^=content_] [id^=content-2_] { opacity: 0; } 

hinzufügen die standardmäßig zu verstecken. Die opacity: 1; in der :checked -regel wird dann zeigen sie.

div[id^=tabla_] { 
 
margin: 40px auto; 
 
width: 100%; /* Ancho del contenedor */ 
 
box-sizing: border-box; 
 
-moz-box-sizing: border-box; 
 
} 
 

 
div[id^=tabla_] input { 
 
height: 32px; 
 
visibility: hidden; 
 
} 
 

 
div[id^=tabla_] label { 
 
float: left; 
 
cursor: pointer; 
 
font-size: 15px; /* Tamaño del texto de las pestañas */ 
 
line-height: 40px; 
 
height: 40px; 
 
padding: 0 20px; 
 
display: block; 
 
color: #888; /* Color del texto de las pestañas */ 
 
text-align: center; 
 
border-radius: 5px 5px 0 0; 
 
background: #eee; /* Fondo de las pestañas */ 
 
margin-right: 5px; 
 
} 
 

 
[id^=content_] [id^=content-1_], 
 
[id^=content_] [id^=content-2_] { opacity: 0; } 
 

 

 
div[id^=tabla_] input[id^=tab-1_]:checked ~ [id^=content_] [id^=content-1_], 
 
div[id^=tabla_] input[id^=tab-2_]:checked ~ [id^=content_] [id^=content-2_]{ 
 
    z-index: 100; 
 
    opacity: 1; 
 
    -webkit-transition: all ease-out 0.2s 0.1s; 
 
-moz-transition: all ease-out 0.2s 0.1s; 
 
-o-transition: all ease-out 0.2s 0.1s; 
 
-ms-transition: all ease-out 0.2s 0.1s; 
 
}

<div id="tabla_6"> 
 
    <input id="tab-1_6" type="radio" name="tab-group6" checked="checked"/> 
 
    <label for="tab-1_6">Tab 1</label> 
 
    <input id="tab-2_6" type="radio" name="tab-group6" /> 
 
    <label for="tab-2_6">Tab2 2</label> 
 
    <div id="content_6">  
 
     <div id="content-1_6">Hello world 1</div> 
 
     <div id="content-2_6">Hello world 2!</div> 
 
    </div> 
 
</div><br>