专栏首页前端开发随笔jQuery实现点击添加样式同胞移除样式

jQuery实现点击添加样式同胞移除样式

效果图

代码

    .box {
        display: flex;
    }

    .rol {
        padding: 15px;
        border: 1px solid rebeccapurple;
        border-radius: 5px;
        margin-right: 10px;
        cursor: pointer;
    }

    .active {
        background: rebeccapurple;
        color: #FFF;
    }
    <div class="box">
        <div class="rol active"> HUAWEI</div>
        <div class="rol">APPLE</div>
        <div class="rol">SONY</div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('.rol').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
            })
        })
    </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Css实现瀑布流布局

    我们只需要设置最外层的父级(waterfall)和子级的父元素(poster)的css就可以

    wePanda
  • vuedraggable实现列表拖动排序

    wePanda
  • Vue里v-for循环双层数组

    wePanda
  • vue-学习笔记(更新中...)

    xing.org1^
  • django 实现电子支付功能

      思路:调用第三方支付 API 接口实现支付功能。本来想用支付宝来实现第三方网站的支付功能的,但是在实际操作中发现支付宝没有 Python 接口,网上虽然有他...

    希希里之海
  • WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式

    首先  Contact form 7 插件是一款免费的WordPress表单插件,用于给访客填写表单、收集信息功能。利用配合MailChimp(国外邮件营销工具...

    AlexTao
  • Vue.js-条件渲染 原

    在<template>中配合v-if条件渲染一整组 因为v-if是一个指令,需要将它添加到一个元素上,但是如果我们想切换多个元素,此时我们可以把一个<temp...

    tianyawhl
  • Python语言和matplotlib库做数据可视化分析

    数据记者和信息设计师,David McCandless,在他的TED演讲中谈到数据可视化的重要性时说过,“通过信息可视化,我们把它变成了一个你可以用眼睛探索的风...

    陆勤_数据人网
  • 《Go语言从入门到实战》第三章:常用集合

    yeedomliu
  • 讲一下怎么区分伪类、伪元素,同时优雅的处理页面浮动的问题

    首先介绍一下什么是伪类:伪类其实我们经常用的到,只是我们自己不会刻意的说这个是伪类这样的一个东西,我下面简单的举个例子就明白了怎么回事

    何处锦绣不灰堆

扫码关注云+社区

领取腾讯云代金券