原生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>