jsクリックリストの行表示背景色に対応するテキストの実装コード_javascriptスキル

この記事の例では、js を使用してリストのテキストをクリックし、テキスト行の背景色を実現する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。
JS は li を制御し、マウスをクリックするとクラスが自動的に追加され、リストのテキストに好みの背景色の Web ページ特殊効果が生成されます。

動作効果図は以下のとおりです。

<style type="text/css">
li{cursor:pointer;}
.cur{background:red;}
</style>
<script type="text/javascript">
window.onload = function ()
{
 var aLi = document.getElementsByTagName("li");
 var i = 0; 
 for (i = 0; i < aLi.length; i++)
 { 
 aLi[i].onclick = function ()
 {
  for (i = 0; i < aLi.length; i++) aLi[i].className = "";
  this.className = "cur";
 };
 }
};
</script>
<div class="clMenu">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。