javascript - 如何在每个选项卡下显示数据?
问题描述
我的 codepen 链接https://codepen.io/santoshch/pen/MWpYdXK
.tab1border{
border-right: 2px solid #f0f0f0;
}
.tab2border{
border-right: 2px solid #f0f0f0;
}
.tab3border{
border-right: 2px solid #f0f0f0;
}
.tab4border{
border-right: 2px solid #f0f0f0;
}
.tab5border{
border-right: 2px solid #f0f0f0;
}
.tab6border{
border-right: 2px solid #f0f0f0;
}
.container-prod {
z-index: 1;
background-color: #fff;
height: 50px;
width: 1000px;
position: absolute;
top: 205px;
left: 531px;
transform: translate(-50%, -50%);
font-size: 0;
border-radius: 3px;
overflow: hidden;
input {
display: none;
&:checked + label {
font-weight: 700;
color: #2241a6;
// background: #eee;
}
@for $i from 1 through 7 {
&#tab#{$i}:checked {
~ .line {
left: #{($i - 1) * 14.28%};
}
~ .content-container #c#{$i} {
opacity: 1;
}
}
}
}
label {
background-color: #fff;
display: inline-block;
font-size: 14px;
height: 50px;
line-height: 50px;
width: 142px;
text-align: center;
color: #555;
position: relative;
cursor: pointer;
padding: 0 10px;
&::after {
content: "";
height: 2px;
width: 100%;
position: absolute;
display: block;
bottom: 0;
opacity: 0;
left: 0;
}
&:hover::after {
opacity: 1;
}
}
.line {
position: absolute;
height: 16px;
border-bottom: 4px solid #2241a6;
width: 138px;
top: 34px;
left: 0;
}
.content-container {
background: #eee;
position: relative;
height: 100px;
font-size: 16px;
.content {
position: absolute;
padding: 10px;
width: 100%;
top: 0;
opacity: 0;
transition: 0.25s ease;
color: #333;
h3 {
font-weight: 200;
margin: 10px 0;
}
p {
margin: 10px 0;
}
p, i {
font-size: 13px;
}
}
}
}
<div class="container-prod">
<input type="radio" id="tab1" name="tab" checked />
<label for="tab1" class="tab1border">Hed</label>
<input type="radio" id="tab2" name="tab" />
<label for="tab2" class="tab2border">Col</label>
<input type="radio" id="tab3" name="tab" />
<label for="tab3" class="tab3border">Tars</label>
<input type="radio" id="tab4" name="tab" />
<label for="tab4" class="tab4border">Wre rods</label>
<input type="radio" id="tab5" name="tab" />
<label for="tab5" class="tab5border">ated</label>
<input type="radio" id="tab6" name="tab" />
<label for="tab6" class="tab6border">Color coed</label>
<input type="radio" id="tab7" name="tab" />
<label for="tab7">steel</label>
<div class="line"></div>
<div class="content-container">
<div class="content" id="c1">
<h3>Features</h3>
<p>There really are a lot of features.</p>
</div>
<div class="content" id="c2">
<h3>History</h3>
<p>The project started in 2018 when someone needed something.</p>
</div>
<div class="content" id="c3">
<h3>Reviews</h3>
<p>Amazing product. I don't know how it works.</p>
<i>- Anonymous</i>
</div>
<div class="content" id="c4">
<h3>Share</h3>
<p>This product is currently not shareable.</p>
</div>
<div class="content" id="c5">
<h3>Share</h3>
<p>This product is currently not shareable.</p>
</div>
<div class="content" id="c6">
<h3>Share</h3>
<p>This product is currently not shareable.</p>
</div>
<div class="content" id="c7">
<h3>Share</h3>
<p>This product is currently not shareable.</p>
</div>
</div>
</div>
我正在处理一个 css 选项卡,对于每个选项卡,我都在尝试显示一些数据,但是数据没有反映,不知道由于什么原因导致每个选项卡没有显示数据。
如果我错了,你能纠正我吗?
我的 codepen 链接https://codepen.io/santoshch/pen/MWpYdXK
解决方案
这是由于overflow: hidden;
在.container-prod
课堂上:
.tab1border {
border-right: 2px solid #f0f0f0;
}
.tab2border {
border-right: 2px solid #f0f0f0;
}
.tab3border {
border-right: 2px solid #f0f0f0;
}
.tab4border {
border-right: 2px solid #f0f0f0;
}
.tab5border {
border-right: 2px solid #f0f0f0;
}
.tab6border {
border-right: 2px solid #f0f0f0;
}
.container-prod {
z-index: 1;
background-color: #fff;
height: 50px;
width: 1000px;
position: absolute;
top: 205px;
left: 531px;
transform: translate(-50%, -50%);
font-size: 0;
border-radius: 3px;
/* overflow: hidden; */
}
.container-prod input {
display: none;
}
.container-prod input:checked + label {
font-weight: 700;
color: #2241a6;
}
.container-prod input#tab1:checked ~ .line {
left: 0%;
}
.container-prod input#tab1:checked ~ .content-container #c1 {
opacity: 1;
}
.container-prod input#tab2:checked ~ .line {
left: 14.28%;
}
.container-prod input#tab2:checked ~ .content-container #c2 {
opacity: 1;
}
.container-prod input#tab3:checked ~ .line {
left: 28.56%;
}
.container-prod input#tab3:checked ~ .content-container #c3 {
opacity: 1;
}
.container-prod input#tab4:checked ~ .line {
left: 42.84%;
}
.container-prod input#tab4:checked ~ .content-container #c4 {
opacity: 1;
}
.container-prod input#tab5:checked ~ .line {
left: 57.12%;
}
.container-prod input#tab5:checked ~ .content-container #c5 {
opacity: 1;
}
.container-prod input#tab6:checked ~ .line {
left: 71.4%;
}
.container-prod input#tab6:checked ~ .content-container #c6 {
opacity: 1;
}
.container-prod input#tab7:checked ~ .line {
left: 85.68%;
}
.container-prod input#tab7:checked ~ .content-container #c7 {
opacity: 1;
}
.container-prod label {
background-color: #fff;
display: inline-block;
font-size: 14px;
height: 50px;
line-height: 50px;
width: 142px;
text-align: center;
color: #555;
position: relative;
cursor: pointer;
padding: 0 10px;
}
.container-prod label::after {
content: "";
height: 2px;
width: 100%;
position: absolute;
display: block;
bottom: 0;
opacity: 0;
left: 0;
}
.container-prod label:hover::after {
opacity: 1;
}
.container-prod .line {
position: absolute;
height: 16px;
border-bottom: 4px solid #2241a6;
width: 138px;
top: 34px;
left: 0;
}
.container-prod .content-container {
background: #eee;
position: relative;
height: 100px;
font-size: 16px;
}
.container-prod .content-container .content {
position: absolute;
padding: 10px;
width: 100%;
top: 0;
opacity: 0;
transition: 0.25s ease;
color: #333;
}
.container-prod .content-container .content h3 {
font-weight: 200;
margin: 10px 0;
}
.container-prod .content-container .content p {
margin: 10px 0;
}
.container-prod .content-container .content p, .container-prod .content-container .content i {
font-size: 13px;
}
<div class="container-prod">
<input type="radio" id="tab1" name="tab" checked />
<label for="tab1" class="tab1border">Hed</label>
<input type="radio" id="tab2" name="tab" />
<label for="tab2" class="tab2border">Col</label>
<input type="radio" id="tab3" name="tab" />
<label for="tab3" class="tab3border">Tars</label>
<input type="radio" id="tab4" name="tab" />
<label for="tab4" class="tab4border">Wre rods</label>
<input type="radio" id="tab5" name="tab" />
<label for="tab5" class="tab5border">ated</label>
<input type="radio" id="tab6" name="tab" />
<label for="tab6" class="tab6border">Color coed</label>
<input type="radio" id="tab7" name="tab" />
<label for="tab7">steel</label>
<div class="line"></div>
<div class="content-container">
<div class="content" id="c1">
<h3>Features</h3>
<p>There really are a lot of features.</p>
</div>
<div class="content" id="c2">
<h3>History</h3>
<p>The project started in 2018 when someone needed something.</p>
</div>
<div class="content" id="c3">
<h3>Reviews</h3>
<p>Amazing product. I don't know how it works.</p>
<i>- Anonymous</i>
</div>
<div class="content" id="c4">
<h3>Share</h3>
<p>This product is currently not shareable.</p>
</div>
<div class="content" id="c5">
<h3>Share</h3>
<p>This product is currently not shareable.</p>
</div>
<div class="content" id="c6">
<h3>Share</h3>
<p>This product is currently not shareable.</p>
</div>
<div class="content" id="c7">
<h3>Share</h3>
<p>This product is currently not shareable.</p>
</div>
</div>
</div>
PS您可以通过避免使用ID使标签更“通用”并且更容易添加/删除: 一个HTML页面中的多个标签没有唯一引用(没有ID或类)
推荐阅读
- ios - 检测转换后的 CAShapeLayer 路径上的点击
- react-redux - 为什么是 Redux,初学者为什么不使用 useContext + useReducer?
- mysql - 按组从值中减去
- javascript - 在 node.js 中处理大文件需要多长时间?
- sql - 我的嵌套子查询和 substr 函数有什么问题
- dataframe - 如何将 spark DF 保存为 CSV 文件?
- javascript - 如何使用 3 个向量(前、右、上)旋转模型
- python - 如何让我的 python 可执行文件正确打开?
- javascript - 在 Javascript 中使用闭包的函数的意外输出
- java - 添加值并插入到 setText