Jquey选择器--按钮组

最新推荐文章于 2022-04-28 09:58:48 发布

ChyoD1811

最新推荐文章于 2022-04-28 09:58:48 发布

阅读量252

点赞数

分类专栏： Jquery 文章标签： Jquery

本文链接：https://blog.csdn.net/ChyoD1811/article/details/100080911

版权

Jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现一堆按钮没有给ID,当被点击时获得响应事件,修改样式,本文使用的是jquery-3.3.1。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>jquery选择器之按钮组</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style media="screen">
      .btn {
        height:30px;
        weight:50px;
      }
      .btn-info{
        background:#fff;
      }
      .btn-inverse{
        background:#000;
      }

    </style>
  </head>
  <body>

        <p id="btn_group">
             <button class="btn btn-info"  ">昨天</button>
             <button class="btn btn-info"  ">今天</button>
             <button class="btn btn-info" ">上周</button>
             <button class="btn btn-inverse"  ">上个月</button>
             <button class="btn btn-info"  ">自定义</button>
         </p>
  

    <script type="text/javascript">

      $("#btn_group>:button").click(function(){
            $("#btn_group>:button").each(function ()
            {
                $(this).prop("className", "btn btn-info");
            })
           this.className = "btn btn-inverse";
        });
    </script>

  </body>
</html>