原生实现点击li弹出相应索引

最新推荐文章于 2022-10-20 19:29:19 发布

weixin_33743248

最新推荐文章于 2022-10-20 19:29:19 发布

阅读量302

点赞数

原文链接：https://juejin.im/post/5d0b14e1e51d455d6c0ad92e

版权

该博客介绍了原生实现点击li弹出相应索引的内容，转载自https://juejin.im/post/5d0b14e1e51d455d6c0ad92e ，涉及前端开发相关技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
  .red{color: red}
</style>
复制代码

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
复制代码

<script>

  function exportIndex () {
    var li = document.getElementsByTagName('li')
    for (var i = 0; i < li.length; i++) {
      li[i].index = i
      li[i].onclick = function () {
        console.log(this.index)
        for (var j = 0; j < li.length; j++) {
          li[j].className = '' // 未选中的class为''
        }
        this.className = 'red' // 选中的class为'on'
      }
    }
  }
  
  exportIndex()
  
</script>
复制代码