js实现鼠标点击切换文字样式并添加下划线

效果图: 

 html代码

      <!-- div_title start -->
      <div class="div_title ">
        <div class="switchTitle">
          <div class="next_btn" id="shjy">
            生活检验
          </div>
          <div class="next_btn next_btn_show next_btn_text" id="jyjc">
            基因检验
          </div>
        </div>
      </div><!-- div_title end -->

css代码

      .div_title{
        height: 48px;
        background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
      }
      .switchTitle{
        margin: auto 25%;
        display: flex;
      }
      .next_btn{
        width: 50%;
        line-height: 48px;
        text-align: center;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        -webkit-background-clip: text;
      }
      .next_btn_text{
        font-size: 18px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #37B7A4;
      }
      .next_btn_show::after{  /*  !!! */
        content: '';   /*  !!! */
        width: 20px;
        height: 3px;
        background: #37B7A4;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        display: block;  /*  !!! */
        margin: -8px auto;
      }

js代码

    //分类 点击事件
    $('.next_btn').on('click', function() {
      //捕捉点击分类的id
      queryType = $(this).attr("id");

      $('.next_btn').removeClass('next_btn_show');
      $('.next_btn').removeClass('next_btn_text');
      $(this).addClass('next_btn_show');
      $(this).addClass('next_btn_text');
    }) 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值