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

原创于 2020-12-13 01:12:19 发布 · 288 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #jquery

jquery 专栏收录该内容

10 篇文章

订阅专栏

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

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>