马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
label和input相隔十万八千里（反正无法直接用+~等选择器选中），那么能不能根据已checked的input选到对应的label呢？（不能使用js）
示例代码如下，请问能否在不使用js的情况下给对应的label加上样式呢？<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
nav {
display: flex;
height: 40px;
background-color: #333;
color: goldenrod;
align-items: center;
}
.menu {
flex: 1;
padding: 0 5% 0 20%;
display: flex;
}
.menu > label {
flex: 1;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
}
ul, li {
display: block;
list-style: none;
}
.tabs {
display: none;
}
input[name=box]:checked + div {
display: block;
}
</style>
<main>
<nav>
<h2>title</h2>
<div class="menu">
<label for="tabs01">tabs01</label>
<label for="tabs02">tabs02</label>
<label for="tabs03">tabs03</label>
<label for="tabs04">tabs04</label>
<label for="tabs05">tabs05</label>
<label for="tabs06">tabs06</label>
</div>
</nav>
<main>
<ul>
<li><input type="radio" id="tabs01" name="box" hidden checked>
<div class="tabs">tabs1</div>
</li>
<li><input type="radio" id="tabs02" name="box" hidden>
<div class="tabs">tabs2</div>
</li>
<li><input type="radio" id="tabs03" name="box" hidden>
<div class="tabs">tabs3</div>
</li>
<li><input type="radio" id="tabs04" name="box" hidden>
<div class="tabs">tabs4</div>
</li>
<li><input type="radio" id="tabs05" name="box" hidden>
<div class="tabs">tabs5</div>
</li>
<li><input type="radio" id="tabs06" name="box" hidden>
<div class="tabs">tabs6</div>
</li>
</ul>
</main>
</main>
</body>
</html>
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-9-10 14:49:23
置顶卡
千斤顶
显身卡
发表于 2019-9-10 16:49:52
