Question

我有关于foreach循环的下一个PHP代码，其中$ d-＆gt; 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; - 规则中的:checked将显示它们。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS样式的Id变量

1 个答案: