原生JS的简单tab切换实现

实现思路是点击上方的按钮，下方的内容随之发生改变，上方和下方用的是两个div块，是兄弟节点，所以需要让tab按钮和下方内容一一对应，例子是基予两个模块若下标相同是一个内容实现的，首先是HTML框架：

<div id="box">//包含tab按钮和内容的整体大框架
<div id="head_list"">//tab按钮及内容
<input type="button" value="菜单一"  class="active"/>
<input type="button" value="菜单二" />
<input type="button" value="菜单三" />
<input type="button" value="菜单四" />
</div>
<div id="menu_content">//tab按钮对应的相应内容
<div style="display:block;">Hello,I am the first!</div>
<div style="display:none;">Hello,I am the seconed!</div>
<div style="display:none;">Hello,I am the third!</div>
<div style="display:none;">Hello,I am the forth!</div>
</div>
</div>

在页面加载完成时，会有一个初始的状态，显示第一个按钮和第一个按钮对应的内容，所以这里我们需要给第一个按钮添加一个样式，至于显示内容在HTML结构里用style=“display：block/none”已经进行了定义。

CSS样式：

<style>
#box{
width:500px;
height: 400px;
background:lightgoldenrodyellow;
border:1px solid black;
}

#head_list input{//div是块级元素，定义为float后在宽度允许的情况下，能在一行内容纳
float:left;
width:25%;
}

.active{//初始及点击后的按钮类
color: cornflowerblue;
}
</style>

最后是动作的添加，在切换时首先把样式，下方内容全部去掉，然后为当前按钮添加样式，显示与当前按钮对应的内容：

<script>
var head_list = document.getElementById("head_list");
var menu_content = document.getElementById("menu_content");
var oli = head_list.getElementsByTagName("input");//获取tab列表
var odiv = menu_content.getElementsByTagName("div");//获取tab内容列表
for(var i=0 ; i<oli.length ; i++){
oli[i].index = i;//定义index变量，以便让tab按钮和tab内容相互对应
oli[i].onclick = function( ){//移除全部tab样式和tab内容
for(var i =0; i < oli.length; i++){
oli[i].className = "";
odiv[i].style.display = "none";
}
this.className = "active";//为当前tab添加样式
odiv[this.index].style.display="block";//显示当前tab对应的内容
}
}
</script>