css html求做一个选项卡
求大神帮忙，网上的下载的；选项卡只有一级；我需要一个两级的选项卡；点一级时刷出二级的菜单；类似这个；...
求大神帮忙，网上的下载的；选项卡只有一级；我需要一个两级的选项卡；点一级时刷出二级的菜单；
类似这个； 展开
类似这个； 展开
3个回答
展开全部
纯CSS写的选项卡效果代码，没有使用js，供学习参考。现在很多都是使用jQuery的，动态效果非常好。站长之家、懒人之家有好多样例可供选择下载。
代码说明
这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。具体请看下面代码。
关于兼容性，因为是用CSS3来制作的，所以如果不支持CSS3的浏览将会出现不兼容的情况。
HTML代码
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">选项卡 1</label>
<div id="tab-content1" class="tab-content">
<p>选项卡内容 1</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">选项卡 2</label>
<div id="tab-content2" class="tab-content">
<p>选项卡内容 2</p>
</div>
</li>
</ul>
CSS代码
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 20px;
text-align: left;
font-family: Lato;
color: #fff;
background: #9b59b6;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
margin: 80px 0 0 10px;
text-align: left;
}
.tabs li {
float: left;
display: block;
}
.tabs input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs label {
display: block;
padding: 14px 21px;
border-radius: 2px 2px 0 0;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
background: #8e44ad;
cursor: pointer;
position: relative;
top: 4px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: #703688;
}
.tabs .tab-content {
z-index: 2;
display: none;
overflow: hidden;
width: 100%;
font-size: 17px;
line-height: 25px;
padding: 25px;
position: absolute;
top: 53px;
left: 0;
background: #612e76;
}
.tabs [id^="tab"]:checked + label {
top: 0;
padding-top: 17px;
background: #612e76;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
display: block;
}
代码说明
这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。具体请看下面代码。
关于兼容性，因为是用CSS3来制作的，所以如果不支持CSS3的浏览将会出现不兼容的情况。
HTML代码
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">选项卡 1</label>
<div id="tab-content1" class="tab-content">
<p>选项卡内容 1</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">选项卡 2</label>
<div id="tab-content2" class="tab-content">
<p>选项卡内容 2</p>
</div>
</li>
</ul>
CSS代码
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 20px;
text-align: left;
font-family: Lato;
color: #fff;
background: #9b59b6;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
margin: 80px 0 0 10px;
text-align: left;
}
.tabs li {
float: left;
display: block;
}
.tabs input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs label {
display: block;
padding: 14px 21px;
border-radius: 2px 2px 0 0;
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
background: #8e44ad;
cursor: pointer;
position: relative;
top: 4px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: #703688;
}
.tabs .tab-content {
z-index: 2;
display: none;
overflow: hidden;
width: 100%;
font-size: 17px;
line-height: 25px;
padding: 25px;
position: absolute;
top: 53px;
left: 0;
background: #612e76;
}
.tabs [id^="tab"]:checked + label {
top: 0;
padding-top: 17px;
background: #612e76;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
display: block;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;font-size: 14px;}
.nTab{width: 510px;height: 200px;margin: 20px auto;border: 1px solid #333;overflow: hidden;}
.none{display: none;}
.nTab .TabTitle li{float: left;cursor: pointer;height: 35px;line-height: 35px;font-weight: bold;text-align: center;width: 124px;margin:0px auto;}
.nTab .TabTitle li a{text-decoration: none;}
.nTab .TabTitle .active{background: black;color: #336699;border-left:1px solid #CCC;border-bottom:1px solid #CCC;border-right:1px solid #CCC;}
.nTab .TabTitle .normal{color: #F1AC1C;border-left:1px solid #CCC;border-bottom:1px solid #CCC;border-right:1px solid #CCC;}
.nTab .TabContent{clear:both;overflow: hidden;background: #fff;padding: 5px;display: block;height: 100px;}
</style>
</head>
<body>
<div class="nTab">
<div class="TabTitle">
<ul id="myTab">
<li class="active" onmouseover="nTabs(this,0);">ASP</li>
<li class="normal" onmouseover="nTabs(this,1);">PHP2</li>
<li class="normal" onmouseover="nTabs(this,2);">PHP3</li>
<li class="normal" onmouseover="nTabs(this,3);">PHP4</li>
</ul>
</div>
<div class="TabContent">
<div id="myTab_Content0">同一页面动门，选</div>
<div id="myTab_Content1" class="none">兼容性好2</div>
<div id="myTab_Content2" class="none">兼容性好3</div>
<div id="myTab_Content3" class="none">兼容性好4</div>
</div>
</div>
<script type="text/javascript">
function nTabs(thisObj, Num) {
if (thisObj.className == "active") return;
var tabList = document.getElementById("myTab").getElementsByTagName("li");
for (i = 0; i < tabList.length; i++) {//点击之后，其他tab变成灰色，内容隐藏，只有点击的tab和内容有属性
if (i == Num) {
thisObj.className = "active";
document.getElementById("myTab_Content" + i).style.display = "block";
} else {
tabList[i].className = "normal";
document.getElementById("myTab_Content" + i).style.display = "none";
}
}
}
</script>
</body>
</html>
满意采纳哦！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;font-size: 14px;}
.nTab{width: 510px;height: 200px;margin: 20px auto;border: 1px solid #333;overflow: hidden;}
.none{display: none;}
.nTab .TabTitle li{float: left;cursor: pointer;height: 35px;line-height: 35px;font-weight: bold;text-align: center;width: 124px;margin:0px auto;}
.nTab .TabTitle li a{text-decoration: none;}
.nTab .TabTitle .active{background: black;color: #336699;border-left:1px solid #CCC;border-bottom:1px solid #CCC;border-right:1px solid #CCC;}
.nTab .TabTitle .normal{color: #F1AC1C;border-left:1px solid #CCC;border-bottom:1px solid #CCC;border-right:1px solid #CCC;}
.nTab .TabContent{clear:both;overflow: hidden;background: #fff;padding: 5px;display: block;height: 100px;}
</style>
</head>
<body>
<div class="nTab">
<div class="TabTitle">
<ul id="myTab">
<li class="active" onmouseover="nTabs(this,0);">ASP</li>
<li class="normal" onmouseover="nTabs(this,1);">PHP2</li>
<li class="normal" onmouseover="nTabs(this,2);">PHP3</li>
<li class="normal" onmouseover="nTabs(this,3);">PHP4</li>
</ul>
</div>
<div class="TabContent">
<div id="myTab_Content0">同一页面动门，选</div>
<div id="myTab_Content1" class="none">兼容性好2</div>
<div id="myTab_Content2" class="none">兼容性好3</div>
<div id="myTab_Content3" class="none">兼容性好4</div>
</div>
</div>
<script type="text/javascript">
function nTabs(thisObj, Num) {
if (thisObj.className == "active") return;
var tabList = document.getElementById("myTab").getElementsByTagName("li");
for (i = 0; i < tabList.length; i++) {//点击之后，其他tab变成灰色，内容隐藏，只有点击的tab和内容有属性
if (i == Num) {
thisObj.className = "active";
document.getElementById("myTab_Content" + i).style.display = "block";
} else {
tabList[i].className = "normal";
document.getElementById("myTab_Content" + i).style.display = "none";
}
}
}
</script>
</body>
</html>
满意采纳哦！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
希望对你有帮助。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
