Vue 索引栏制作 点击高亮显示

实现侧边栏ABCDEFGHIJKLMNOPQRSTUVWXYZ
点击某个字母出发相应事件
html

	<!-- 字母索引 -->
    <div class="altherList">
      <p
        class='letter'
        @click="clickIndexBar(index)"
        v-for="(item,index) in indexList"
        :key="index"
      >{{indexList[index]}}</p>
    </div>

css

	/* 右边字母列表div栏样式 */
	.altherList {
	  position: fixed;
	  left: 1%;
	  top: 14%;
	  height: 50%;
	  z-index: 6;
	}
	/* 字母样式 */
	.letter {
	  color: #101010;
	  z-index: 5;
	  line-height: 0.3;
	  width: 10px;
	  height: 7px;
	}

点击字母是触发click事件
使用indexLast 记录上次的索引,实现本次点击的字母颜色变色,上次点击的字母回复之前的颜色

	clickIndexBar (index) {
	      var letterObj = document.getElementsByClassName('letter')
	      letterObj[this.indexLast].style.color = '#101010'
	      letterObj[index].style.color = '#2BD5D5'
	      alert(this.indexList[index])//弹出点击的某个字母,可替换相应事件
	      this.indexLast = index
    }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值