美文网首页
同辈元素点击添加移除边框

同辈元素点击添加移除边框

作者: 洱月 | 来源:发表于2017-07-19 16:20 被阅读0次

需求:点击一个盒子,添加红色边框,同时删除其余同名盒子的边框

方法一:

var indexNum = null;
$('body').on('click', '.content-box', function () {
    if (!indexNum) {
        $(this).css("border", "1px solid red");          
    } else {
        if (indexNum != this) {
            $(this).css("border", "1px solid red");
            $(indexNum).css("border", "none");
        } else { return;}
    }
    indexNum = this;
})

方法二

$('body').on('click', '.content-box', function () {
   
    $('.content-box').not($(this)).removeClass('Acitve');

    // 也可以写为$('.content-box').removeClass('Acitve'),第一行相对来说较优雅

    $(this).addClass('Acitve');
})

.Acitve{
    border:1px solid red;
}

我叫洱月,我愿意陪你到洱海风花雪月,你,看到我了吗?

相关文章

  • 同辈元素点击添加移除边框

    需求:点击一个盒子,添加红色边框,同时删除其余同名盒子的边框 方法一: 方法二 我叫洱月,我愿意陪你到洱海风花雪月...

  • 日常踩坑收集中

    1、通过点击背的元素来给swiper动态添加移除类。: swiper元素想要在别的元素点击跟着改变当前active...

  • CSS(button按钮点击样式)

    按钮的点击时出现黑色边框的问题 添加css属性 按钮的点击后出现蓝色边框的问题 添加css属性

  • 在源码里学到的编程技巧

    持续更新中.... 1、添加点击事件前,先移除--bootstrap-table插件 在添加点击事件前,先移除之前...

  • Kotlin collections 函数表索引

    元素增删 addAll:添加指定元素 removeAll:移除指定元素 retainAll:保留指定元素 fill...

  • CSS3随笔1

    一,边框 1.border-radius为元素添加圆角边框,使用方法如下: ...

  • .NET C# 自定义集合扩展

    获取重复元素 添加新元素不重复 获取并移除

  • 原生js的一些兼容封装

    获取Dom元素 获取样式表里的样式 添加和移除类名 添加(优化原生防止重复添加) 移除类(优化原生防止重复添加) ...

  • 背景与边框之“多层边框”

    设计场景 给元素添加多层边框 给元素添加双层边框 box-shadow方案 说明 一个正值的扩张半径 + 两个为零...

  • 使用vue.js写一个tab选项卡

    通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加a...

网友评论

      本文标题:同辈元素点击添加移除边框

      本文链接:https://www.haomeiwen.com/subject/xnwlkxtx.html