的CSS樣式

Question

id變量我的下一個PHP代碼有關foreach循環，其中$ D-> ID是可變的：

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

現在，我有CSS樣式的下一個代碼（這做工精細！ ）：

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

，但現在，我有一個代碼，並不是正常工作:(

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

一些想法

？

非常感謝！

Answer 1

您從未爲（未選中的）[id^=content_] [id^=content-1_]設置不透明度，所以它總是等於1（因爲這是瀏覽器的默認值）。

添加

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

隱藏的默認。然後，中的opacity: 1;將顯示它們。

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>