网页tab键的实现
前端常用tab键的实现，用到的原理是当点击一个元素时，通过javascript操作css的display属性，达到控制另一个元素的显示(display: block)与不显示(display: none)
需要注意的是，由于使用的是onclick事件，该事件点击后会导致刷新，从而将原本应该从点击事件中获得显示的元素重置，回到初始隐藏状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test tabs 04</title>
<style type="text/css">
a {
text-decoration: none;
}
#content01 {
display:none;
}
#content02 {
display: none;
}
.tab_Btn {
display: inline-block;
width: 100px;
height: 40px;
color: black;
background: orange;
padding-top: 5px;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<a class="tab_Btn" href="" onclick="showTabs(tab01);return false;">Tab1</a>
<a class="tab_Btn" href="" onclick="showTabs(tab02);return false;">Tab2</a>
<!-- 需要加return false 否则onclick事件会自动刷新 content又会默认置为display:none -->
</div>
<!-- content内容为默认隐藏的内容 -->
<div class="content" id="content01">
<p>Tab1 content</p>
</div>
<div class="content" id="content02">
<p>Tab2 content</p>
</div>
<script type="text/javascript">
var tab01 = document.getElementById("content01");
var tab02 = document.getElementById("content02");
//console.log(tab01);
function showTabs(tab) {
if (tab01 == tab){
tab01.style.display = "block";
tab02.style.display = "none";
}
else{
tab02.style.display = "block";
tab01.style.display = "none";
}
}
</script>
</body>
</html>本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
