jquery如何用each遍历实现一个排异切换的效果?

本文介绍了一种使用CSS和jQuery实现的排异切换效果。通过给指定的元素添加和移除特定的类名来改变其颜色状态,同时确保同一时刻只有一个元素处于激活状态。这种方法可以应用于导航菜单或选项卡式的UI设计中。

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

1.给样式

 <style>
        .rec{
            color:red;
        }
        .gre{
            color: green;
        }
    </style>

2.给标签

  <ul>
       <li class="m">c</li>
       <li class="m">h</li>
       <li class="m">e</li>
       <li class="m">n</li>
       <li class="m">g</li>
       <li class="m">w</li>
       <li class="m">y</li>
       <li class="m">a</li>
    </ul>

3.给js,用each实现排异切换效果  

<script src="./jquery-3.3.1.min.js"></script>
<script>
    $('ul li').each(function(index,item){
        // if(index==5){
        //     var that=this;
        //    console.log(item);
        //    console.log($(that));
        //    $(that).click(function(){
        //        $(that).css('color','red');
        //    })
        // }
        var that=this;
        $(that).click(function(e){
            // console.log(e)
            $(that).addClass('rec').removeClass('gre').siblings().addClass('gre').removeClass('rec');
        })
    })
</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值