选项卡
Posted 街角的守望者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选项卡相关的知识，希望对你有一定的参考价值。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #f00;
display: none;
}
</style>
<script>
/**
* 需求：
* 点击按钮显示对应的div,让其它的按钮背景色去掉，让其它的div都隐藏
*
* 分析
* 1、获取到所有的按钮以及div
* 2、给每一个按钮添加点击事件
* 1、把所有的按钮背景色全部清空
* 2、把所有的div全部隐藏
* 3、给前点击的按钮添加一个背景色
* 4、让当前点击的按钮对应的div,让它显示
*/
window.onload=function(){
var inputs=document.querySelectorAll("input");
var divs=document.querySelectorAll("div");
for (var i = 0; i < inputs.length; i++) {
inputs[i].index=i;
inputs[i].onclick=function(){
//点击的时候一下来要把所有的样式清空，再让所有div隐藏
for (var i = 0; i < inputs.length; i++) {
inputs[i].style.background=‘‘;
divs[i].style.display=‘none‘;
}
//让当前的按钮添加背景色，让对应的div显示
this.style.background=‘yellow‘;
divs[this.index].style.display=‘block‘;
};
}
};
</script>
</head>
<body>
<input type="button" id="" value="选项1" style="background: yellow;"/>
<input type="button" id="" value="选项2" />
<input type="button" id="" value="选项3" />
<div style="display: block;">内容一</div>
<div>内容二</div>
<div>内容三</div>
</body>
</html>
以上是关于选项卡的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 2.1 javascript嵌套选项卡：内部选项卡关闭外部选项卡
用户选择选项卡时如何重置 UITabBarController 的选项卡（或选项卡控制器）？
JQuery选项卡 - 嵌套选项卡的问题 - 在初始加载时激活子选项卡