Question

我在一个页面中有两组具有相同标题和标签但内容不同的css选项卡，两个第一个选项卡均已在css中“选中”，但是其行为似乎是在两组选项卡中只有一个“已选中”属性。我希望这两个集合始终都具有选中的标签。仅使用CSS可能吗？这是我到目前为止所拥有的副本。

html

<div class="tabs m-tab">
<input id="about-m" type="radio" name="tabs" checked="checked">
<label for="about-m">About Me</label>

 <input id="profile-m" type="radio" name="tabs">
<label for="profile-m">Profile</label>

<input id="typical-m" type="radio" name="tabs">
<label for="typical-m">Typical Day</label>

<div class="tab-info" id="m-about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="tab-info" id="m-profile">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<div class="tab-info" id="m-typical">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua labo ris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>

<div class="tabs p-tab">
<input id="about-p" type="radio" name="tabs" checked="checked">
<label for="about-p">About Me</label>

<input id="profile-p" type="radio" name="tabs">
<label for="profile-p">Profile</label>

<input id="typical-p" type="radio" name="tabs">
<label for="typical-p">Typical Day</label>

<div class="tab-info" id="p-about">
<p>Hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</div>

<div class="tab-info" id="p-profile">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="tab-info" id="p-typical">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

css

.m-tab, .p-tab {
    display:inline-block;
    width:400px;
    height:450px;
}

.tab-info {
    display:none;
    padding:10px;
    border-top:1px solid #abc;
}

.tabs input {
    display:none;
}

.tabs label {
    display:inline-block;
    margin:0 0 -1px;
    padding:15px 25px;
    font-weight:600;
    text-align:center;
    color: rgb(134, 206, 155);
    border: 1px solid transparent;
}

.tabs label:hover {
    color:rgb(47, 187, 89);
    cursor:pointer;
}

.tabs input:checked + label {
    color:rgb(2, 163, 51);
    border:1px solid #abc;
    border-top:3px solid rgb(27, 190, 76);
    border-bottom:1px solid #fff;
}


#about-m:checked ~ #m-about,
#profile-m:checked ~ #m-profile,
#typical-m:checked ~ #m-typical,
#about-p:checked ~ #p-about,
#profile-p:checked ~ #p-profile,
#typical-p:checked ~ #p-typical {
    display: block;
}

复制到我的代码笔上：https://codepen.io/tinqqx3/pen/MZNKZg预先感谢！

Answer 1

唯一的问题是您将所有收音机都放在同一组中

def roll():
f=0
arry = []
count = 0
while count is not 100:
    numb = randint(1,6)
    if numb is 1 or 2:
        f=f-1
    elif numb is 3 or 4 or 5:
        f=f+1
    else:
        f=f + randint(1,6)
    count=count+1
    arry.append(f)
return arry

.m-tab, .p-tab {
    display:inline-block;
    width:400px;
    height:450px;
}

.m-tab .tab-info , .p-tab .tab-info{
    display:none;
    padding:10px;
    border-top:1px solid #abc;
}
  
.tabs input {
    display:none;
}
  
.tabs label {
    display:inline-block;
    margin:0 0 -1px;
    padding:15px 25px;
    font-weight:600;
    text-align:center;
    color: rgb(134, 206, 155);
    border: 1px solid transparent;
}

.tabs label:hover {
    color:rgb(47, 187, 89);
    cursor:pointer;
}
  
.tabs input:checked + label {
    color:rgb(2, 163, 51);
    border:1px solid #abc;
    border-top:3px solid rgb(27, 190, 76);
    border-bottom:1px solid #fff;
}
  
  
#about-m:checked ~ #m-about,
#profile-m:checked ~ #m-profile,
#typical-m:checked ~ #m-typical,
#about-p:checked ~ #p-about,
#profile-p:checked ~ #p-profile,
#typical-p:checked ~ #p-typical {
    display: block;
}

一页中有2组标签，默认情况下带有“已选中”标签

1 个答案: