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

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

作者: 洱月 | 来源:发表于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;
    }
    

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

    相关文章

      网友评论

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

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