无需字体图标，CSS绘制上下小三角点击切换颜色（可用作排序按钮）

最新推荐文章于 2024-05-07 10:54:38 发布

置顶一码是一码

最新推荐文章于 2024-05-07 10:54:38 发布

阅读量5.6k

点赞数 4

文章标签： css绘制上下三角排序 table排序样式

本文链接：https://blog.csdn.net/weixin_42720201/article/details/82783185

版权

一些UI框架的table表格自带排序,只需加一个类似sort :true这样的就能实现排序功能和排序样式,但是也有例外情况,只要求前端人员作出css样式,不需要交互效果,这样类似boot-strap layUi就不能用了,只能手动添加样式了，这时候就有两种选择了，一种是用字体图标，png图片切换，还有一种就是下面要说的 css绘制三角形，点击切换颜色，功能很简单。

先附上效果图

首先 html代码

<body>
  <div class="arr">
    <div class="arrUp"></div>
    <div class="arrDown"></div>
  </div>
</body>

css代码

 <style>
    .arr {
      width: 160px;
    }

    .arrUp {
      width: 0;
      height: 0;
      border: 80px solid transparent;
      border-bottom-color: #ccc;
      cursor: pointer;
    }

    .arrDown {
      width: 0;
      height: 0;
      border: 80px solid transparent;
      border-top-color: #ccc;
      margin-top: 10px;
      cursor: pointer;
    }
  </style>

js代码控制变色

<script src="js/jquery-1.11.2.js"></script>
<script>
  $(function () {
    $(".arrUp").on("click", function () {
      $(this).css("border-bottom-color", "#b2b2b2");
      $(".arrDown").css("border-top-color", "#ccc")
    });
    $(".arrDown").on("click", function () {
      $(this).css("border-top-color", "#b2b2b2")
      $(".arrUp").css("border-bottom-color", "#ccc")
    })
  })
</script>

为了省事，引用了jq

然后调整大小，用定位放在thead的 th 中就行了

一码是一码

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
无需字体图标，CSS绘制上下小三角点击切换颜色（可用作排序按钮）

一些UI框架的table表格自带排序,只需加一个类似sort :true这样的就能实现排序功能和排序样式,但是也有例外情况,只要求前端人员作出css样式,不需要交互效果,这样类似boot-strap layUi就不能用了,只能手动添加样式了，这时候就有两种选择了，一种是用字体图标，png图片切换，还有一种就是下面要说的 css绘制三角形，点击切换颜色，功能很简单。先附上效果图首先 ...
复制链接

扫一扫