选项卡组件

直接上代码.....

html5:
 
<div id="card">
    <input type="button" value="选项1" class="ing">
    <input type="button" value="选项2">
    <input type="button" value="选项2">
    <input type="button" value="选项3">
    <div>Hello javaScript!</div>
    <div>Welcome to you!</div>
    <div>Best wishes to you!</div>
    <div>Come on!</div>
 </div>
 
 
css3:
 
#card div {
    width: 500px;
    height: 500px;
    background: red;
    display: none;
}
.ing {
    color: green;
}
 
 
javaScript:
 
    var card = document.getElementById("card");
    var Iput = card.getElementsByTagName("input");
    var box  = card.getElementsByTagName("div");
    for (var i = 0; i < Iput.length; i++) {
        Iput[i].index = i;
        Iput[i].onclick = function(){
    　     ///清除所有样式　　　
            for (var j = 0; j < Iput.length; j++) {
                Iput[j].className = '';
                box[j].style.display = 'none';
            }
　　　　 //给当前的按钮和div添加样式
            this.className = 'ing';
            box[this.index].style.display = 'block'; 
        }
    }