欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【前端】angularJS或者jquery实现按钮点击变色,再点击变回来

程序员文章站 2022-04-27 17:54:06
...

目的:使按钮在两种状态之间切换,注意:简单的通过.修改focus和active的样式是做不到的。

效果图:

【前端】angularJS或者jquery实现按钮点击变色,再点击变回来
【前端】angularJS或者jquery实现按钮点击变色,再点击变回来

html代码:

 <div class="col-1">
   <button class="orderByTime" ng-click="changeDirection()">时间
   <img class="down" src="/onlyofficeeditor/images/paperList/down.png">//最开始显示
   <img class="up noDisplay" src="/onlyofficeeditor/images/paperList/up.png"></button>//最开始隐藏
</div>

js代码:

function paperListCtrl($scope, $http) {
    $scope.changeDirection = function() {
        if ($(".orderByTime").hasClass("my-btn-blue2")){//如果按钮是蓝色
            $(".orderByTime").removeClass("my-btn-blue2");//把蓝色去掉
            $(".up").addClass("noDisplay");//不显示向上的箭头
            $(".down").removeClass("noDisplay");//显示向下的箭头
        }else{//如果按钮不是蓝色
            $(".orderByTime").addClass("my-btn-blue2");//把蓝色加上
            $(".down").addClass("noDisplay");//不显示向下的箭头
            $(".up").removeClass("noDisplay");//显示向上的箭头
        }

    }
}

css代码:

.orderByTime{
  border: none;
  white-space:nowrap; /* 不换行 */
  margin-top: 2px;
}

button:focus {
    outline: none;/* 没有边框 */
}

.noDisplay{
  display: none; /* 隐藏*/
}