基础 - 排他思想

结构

<div class="box">

    <button>第一</button>
    <button>第二</button>
    <button>第三</button>
    <button>第四</button>
</div>

样式

.special {
    font-weight:bold;">#C81623;
}

行为

window.onload = function () {
　　function setIndex (aDiv) {
    　　for(var i= 0,l=aDiv.length;i<l;i++) {
       　　 aDiv[i].index = i;
   　　 }
　　}
    function clearColor(aDiv) {
        for(var i= 0,l=aDiv.length;i<l;i++) {
            aDiv[i].className = "";
        }
    }

    var aBox = document.getElementsByClassName("box");
    var aButton = aBox[0].getElementsByTagName("button");

　　setIndex(aButton);
    for(var i= 0,l=aButton.length;i<l;i++) {
        aButton[i].onclick = function () {
            clearColor(aButton);
            this.className = "special";

　　　　　　　console.log(this.index);
        }
    }
    aButton[0].onclick();
}

基础 - 排他思想

原文：http://www.cnblogs.com/WeWeZhang/p/5730054.html