dom03排他性tab栏切换效果

排他性：先去掉所有，再绑定自身

<script>
        var inputs=document.getElementsByTagName('input');
        for (var i = 0; i <inputs.length; i++) {
            inputs[i].onclick=function () {
                //利用排他性先去掉所有按钮
                for (var i = 0; i <inputs.length; i++) {
                        inputs[i].className="";//
        };
                this.className="castom";//此时绑定的是每个按钮
            }
        };
    </script>

专门用来操作标签属性的方法：获取，设置，移除

<script>
    var box=document.getElementById('box');
    //专门用来操作标签属性的方法
    //获取 任何标签中的属性都可以获取getAttribute("属性名")
    console.log(box.getAttribute("a"));
    //设置 任何标签中的属性都可以设置setAttribute("属性名"，"属性值")
    box.getAttribute("class","cls");
    //移除 任何标签中的属性都可以移除
    box.removeAttribute("a");
</script>   

tab栏切换效果：

<script>
    var box=document.getElementById('box');
    var spans=box.getElementsByTagName('spans');
    var lis=box.getElementsByTagName('li');
    //点击span让当前span高亮
    for (var i = 0; i <spans.length; i++) {
            //spans[i].index=i;//自定义属性
            spans[i].setAttribute("index",i);
            spans[i].onclick=function () {
                //排他
                //干掉所有人
                for (var i = 0; i <spans.length; i++) {
                        //spans[i].className="";
                        spans[i].removeAttribute("class");
        };
                //this.className="current";//留下自己
                this.setAttribute("class","current");
                //让下面对应的li也显示出来
                for (var i = 0; i <lis.length; i++) {
                        //lis[i].className="";
                        lis[i].removeAttribute("class");
        };
            //var index=this.index;
            var index=this.getAttribute("index");
            //lis[index].className="current";
            lis[index].setAttribute("class","current");
            }
        };
    </script>