【前端】angularJS或者jquery實現按鈕點選變色,再點選變回來
阿新 • • 發佈:2019-02-13
目的:使按鈕在兩種狀態之間切換,注意:簡單的通過.修改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; /* 隱藏*/
}