JSFiddle - React, Tailwind, and code Playground

by brian20181109

HTML

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

ul{
    list-style: none;
    width: 150px;
    height: 29px;
    
    margin: 30px;
}
li{
    float: left;
    width: 30px;
    height: 25px;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iLTE1IC0xNSAzMCA1MCI+CjxwYXRoIGQ9Ik0tNi40Nyw4LjkwIEwwLjAwLDUuMDAgNi40Nyw4LjkwIDQuNzYsMS41NSAxMC40NiwtMy40MCAyLjk0LC00LjA1IDAuMDAsLTExLjAwIC0yLjk0LC00LjA1IC0xMC40NiwtMy40MCAtNC43NiwxLjU1eiIKc3R5bGU9InN0cm9rZTpibGFjaztzdHJva2Utd2lkdGg6MXB4O2ZpbGw6bm9uZSIvPgo8cGF0aCBkPSJNLTYuNDcsMzMuOTAgTDAuMDAsMzAuMDAgNi40NywzMy45MCA0Ljc2LDI2LjU1IDEwLjQ2LDIxLjYwIDIuOTQsMjAuOTUgMC4wMCwxNC4wMCAtMi45NCwyMC45NSAtMTAuNDYsMjEuNjAgLTQuNzYsMjYuNTV6IgpzdHlsZT0ic3Ryb2tlOmJsYWNrO3N0cm9rZS13aWR0aDoxcHg7ZmlsbDp5ZWxsb3ciLz4KPC9zdmc+);
}
.active{
    background-position-y: -25px;
}

JavaScript

var aLi = document.getElementsByTagName('li');
var oIinfo = document.getElementsByTagName('p')[0];

var current = -1;

window.onclick = function(event) {
  for (i=0; i<aLi.length;i++){
    if (event.target != aLi[i]) aLi[i].className = null;
  }
}


for(i=0;i<aLi.length;i++){
    aLi[i].index = i;

    aLi[i].onmouseover = function(){
        for(j=0;j<aLi.length;j++){
            if(j<=this.index){
                aLi[j].className = 'active';
            }else{
                aLi[j].className = null;
            }
        }
    
        
    }

    aLi[i].onmouseout = function(){      
        for(j=0;j<aLi.length;j++){    
            if(j<= current){              //看不懂的地方
                aLi[j].className = 'active';
            }else{
            aLi[j].className = null; 
            }            
        }
    }
    
    aLi[i].onclick = function(){      
        current = this.index;
    }
}