HTML tab导航选项卡的一些问题 大神进
<style>.tabs{width:1080px;margin:10pxauto;}input{opacity:0;}label{cursor:pointer;colo...
<style>
.tabs {width: 1080px;margin: 10px auto;}
input {opacity: 0;}
label {cursor:pointer; color:#999;padding: 2% 3%;float:left;margin-right:2px;}
input:checked + label {color:#F00;}
.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,
.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),
.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),
.tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
opacity: 1;
-webkit-transition: .3s;}
.panels {float:left;clear:both;position:relative;width:1080px;border-top:#CCC 1px solid;}
.panel {width:100%;opacity:0;position:absolute;padding:10px 0px 0px 0px;}
</style>
<body>
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">推荐</label>
<input id="two" name="tabs" type="radio">
<label checked for="two">女装</label>
<input id="three" name="tabs" type="radio">
<label checked for="three">男装</label>
<div class="panels">
<div class="panel"> <div style="height:300px; background:#666;" ></div>
</div>
<div class="panel">
<div style="height:500px; background:#666;" ></div>
</div>
<div class="panel">
<div style="height:600px; background:#999;" ></div>
</div>
</div>
</article>
</body>
我想在红色选框的位置写一个内容 如图1
当我切换到女装下时就变成了这样 被覆盖了如图2
如何做到图3的效果 随着tab选项卡下选项内容的高度变化而变化推荐的高是300 女装的高是500 男装的高是600 而不是想图2一样被覆盖
切换到推荐是图1 效果 切换到 女装是图3效果 求大神指点迷津.... 展开
.tabs {width: 1080px;margin: 10px auto;}
input {opacity: 0;}
label {cursor:pointer; color:#999;padding: 2% 3%;float:left;margin-right:2px;}
input:checked + label {color:#F00;}
.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,
.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),
.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),
.tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
opacity: 1;
-webkit-transition: .3s;}
.panels {float:left;clear:both;position:relative;width:1080px;border-top:#CCC 1px solid;}
.panel {width:100%;opacity:0;position:absolute;padding:10px 0px 0px 0px;}
</style>
<body>
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">推荐</label>
<input id="two" name="tabs" type="radio">
<label checked for="two">女装</label>
<input id="three" name="tabs" type="radio">
<label checked for="three">男装</label>
<div class="panels">
<div class="panel"> <div style="height:300px; background:#666;" ></div>
</div>
<div class="panel">
<div style="height:500px; background:#666;" ></div>
</div>
<div class="panel">
<div style="height:600px; background:#999;" ></div>
</div>
</div>
</article>
</body>
我想在红色选框的位置写一个内容 如图1
当我切换到女装下时就变成了这样 被覆盖了如图2
如何做到图3的效果 随着tab选项卡下选项内容的高度变化而变化推荐的高是300 女装的高是500 男装的高是600 而不是想图2一样被覆盖
切换到推荐是图1 效果 切换到 女装是图3效果 求大神指点迷津.... 展开
1个回答
展开全部
用我这个试试
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0px; padding:0px;}
.tabs {width: 1080px;margin: 10px auto;}
input {opacity: 0;}
label {cursor:pointer; color:#999;padding: 2% 3%;float:left;margin-right:2px;}
input:checked + label {color:#F00;}
.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,
.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),
.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),
.tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {-webkit-animation:tab 2s ease; display:block;}
@-webkit-keyframes tab{0%{ opacity:0;}100%{ opacity:1;}}
.panels {float:left;clear:both;position:relative;width:1080px;border-top:#CCC 1px solid;}
.panel {width:100%;padding:10px 0px 0px 0px; display:none;}
</style>
</head>
<body>
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">推荐</label>
<input id="two" name="tabs" type="radio">
<label checked for="two">女装</label>
<input id="three" name="tabs" type="radio">
<label checked for="three">男装</label>
<div class="panels">
<div class="panel">
<div style="height:300px; background:#666;" >11111</div>
</div>
<div class="panel">
<div style="height:500px; background:#666;" >22222</div>
</div>
<div class="panel">
<div style="height:600px; background:#999;" >33333</div>
</div>
<div style="border:#F00 solid 2px; height:100px;"></div>
</div>
</article>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0px; padding:0px;}
.tabs {width: 1080px;margin: 10px auto;}
input {opacity: 0;}
label {cursor:pointer; color:#999;padding: 2% 3%;float:left;margin-right:2px;}
input:checked + label {color:#F00;}
.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,
.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),
.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),
.tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {-webkit-animation:tab 2s ease; display:block;}
@-webkit-keyframes tab{0%{ opacity:0;}100%{ opacity:1;}}
.panels {float:left;clear:both;position:relative;width:1080px;border-top:#CCC 1px solid;}
.panel {width:100%;padding:10px 0px 0px 0px; display:none;}
</style>
</head>
<body>
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">推荐</label>
<input id="two" name="tabs" type="radio">
<label checked for="two">女装</label>
<input id="three" name="tabs" type="radio">
<label checked for="three">男装</label>
<div class="panels">
<div class="panel">
<div style="height:300px; background:#666;" >11111</div>
</div>
<div class="panel">
<div style="height:500px; background:#666;" >22222</div>
</div>
<div class="panel">
<div style="height:600px; background:#999;" >33333</div>
</div>
<div style="border:#F00 solid 2px; height:100px;"></div>
</div>
</article>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
