【前端】angularJS或者jquery实现按钮点击变色,再点击变回来
程序员文章站
2022-04-27 17:54:06
...
目的:使按钮在两种状态之间切换,注意:简单的通过.修改focus和active的样式是做不到的。
效果图:
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; /* 隐藏*/
}
上一篇: 上演了一场小狗回魂
下一篇: 咸丰帝资质平平,他为什么能当上皇帝?