原生选显卡

选显卡逻辑：先清空所有，在给当前加上

	 <div id="box">
	 		 首先创建三个点击按钮
	        <input type="button" value="按钮一">
	        <input type="button" value="按钮二">
	        <input type="button" value="按钮三">
	        然后写对应的内容
	        <div>001</div>
	        <div>002</div>
	        <div>003</div>
    </div>	

js

 <script>
    window.onload=function(){
   获取元素
        var oBox=document.getElementById('box');
        var aBtn=oBox.getElementsByTagName('input');
        var aDiv=oBox.getElementsByTagName('div');
	遍历下标
        for(var i=0;i<aBtn.length;i++){
            aBtn[i].index=i;
            aBtn[i].onclick=function(){
                for(var i=0;i<aBtn.length;i++){
                  清空
                    aBtn[i].className='';
                    aDiv[i].style.display='none';
                }
                添加class名字
this.className='ac';
当前显示
aDiv[this.index].style.display='block'
}
}
}
</script>	

样式

<style>
    .ac{
        background:red;
    }
    #box div{
        width:320px;
        height:280px;
        border:1px solid #000;
        display:none;
    }
</style>

最终的html内容

  <div id="box">
        <input class="ac" type="button" value="按钮一">
        <input type="button" value="按钮二">
        <input type="button" value="按钮三">
        <div style="display:block;">001</div>
        <div>002</div>
        <div>003</div>
    </div>