php - CSS 样式的 Id 变量

Question

我有下一个关于 foreach 循环的 php 代码，其中 $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; }

默认隐藏那些。 :checked 规则中的 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>