如何使用纯css+js开发出tabs标签特效

 我来答

2个回答

#热议# 为什么有人显老，有人显年轻？

帐号已注销
2016-06-27

知道答主

回答量：20

采纳率：0%

帮助的人：9.1万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.nTab {
float: left;
margin: 0 auto;
border-bottom: 1px #C7C7CD solid;
background: #d5d5d5;
background-position: left;
background-repeat: repeat-y;
margin-bottom: 2px;
}

.nTab .TabTitle {
clear: both;
height: 26px;
overflow: hidden;
}

.nTab .TabTitle ul {
margin: 0;
padding: 0;
}

.nTab .TabTitle li {
float: left;
width: 90px;
cursor: pointer;
padding-top: 6px;
text-align: center;
padding-bottom: 7px;
list-style-type: none;
}

.nTab .TabTitle .active {
background: url(../images/tab_bg1.gif) left -25px no-repeat;
border-left: 1px #C7C7CD solid;
border-top: 1px #C7C7CD solid;
border-bottom: 1px #fff solid;
}

.nTab .TabTitle .normal {
background: url(../images/tab_bg1.gif);
border-top: 1px #C7C7CD solid;
border-bottom: 1px #C7C7CD solid;
}

.nTab .TabContent {
width: auto;
background: #fff;
margin: 0px auto;
padding: 10px 0 0 0;
border-right: 1px #C7C7CD solid;
border-left: 1px #C7C7CD solid;
}

.none {
display: none;
}
</style>

<script type="text/javascript">
function nTabs(thisObj, Num) {
if (thisObj.className == "active") return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for (i = 0; i < tabList.length; i++) {
if (i == Num) {
thisObj.className = "active";
document.getElementById(tabObj + "_Content" + i).style.display = "block";
} else {
tabList[i].className = "normal";
document.getElementById(tabObj + "_Content" + i).style.display = "none";
}
}
}
</script>
</head>
<body>
<div class="nTab">
<div class="TabTitle">
<ul id="myTab0">
<li class="active" onclick="nTabs(this,0);">内容1</li>
<li class="normal" onclick="nTabs(this,1);">内容2</li>
</ul>
</div>
<div class="TabContent"></div>
<div id="myTab0_Content0">
内容1

</div>
<div id="myTab0_Content1" class="none">
内容2

</div>
</div>
</body>
</html>

本回答由提问者推荐

已赞过 已踩过<

评论收起

匿名用户
2016-06-26

展开全部

网上现成的一大把抓，这种化简单的东西干嘛还要重复开发

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何使用纯css+js开发出tabs标签特效

其他类似问题

为你推荐：