单击按钮时如何更改按钮的背景颜色？

【问题标题】：How to change the background color of a button when I click on it?单击按钮时如何更改按钮的背景颜色？
【发布时间】：2020-02-25 04:57:36
【问题描述】：

我从 Angular 开始，我正在和我的实习同事一起开发一个目录应用程序，这是我的问题：

我在菜单中有这样的小按钮：

btn menu

我希望当我点击其中一个按钮时，它的背景会变成橙色，例如：

btn color

picture acceuil

正如你在这里看到的，我点击了主页按钮，它把我带回到主页，“主页”按钮的背景是橙色的。

现在我希望当我单击显示在其背景上方的 3 个按钮之一时，其背景颜色为橙色，而在其背景前选择的另一个按钮为黑色，依此类推...

这是我的component.html的代码：

<div class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
    <ul class="nav sidebar-nav">
        <li class="dropdown activ"><a class="dropdown-toggle" [routerLink]="['home']" class="active" data-toggle="dropdown"><i class="fa fa-fw fa-home"></i> Accueil </a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-search"></i> recherche <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li class="element"><a [routerLink]="['nonRelationEntity']"><i class="fa fa-fw fa-angle-right "></i> entités sans relations</a></li>
        </ul></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-book"></i> catalogue <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li class="element"><a [routerLink]="['entity']"><i class="fa fa-fw fa-angle-right "></i> entité</a></li>
                <li class="element"><a [routerLink]="['relation']"><i class="fa fa-fw fa-angle-right "></i> relation</a></li>
                <li class="element"><a [routerLink]="['gestionCatalogue']"><i class="fa fa-fw fa-angle-right "></i> gestion catalogue</a></li>
            </ul></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-exchange-alt"></i> mapping <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li class="element"><a [routerLink]="['profileMapping']"><i class="fa fa-fw fa-angle-right "></i> mapping des profiles</a></li>
                <li class="element"><a [routerLink]="['profile']"><i class="fa fa-fw fa-angle-right "></i> profile</a></li>
                <li class="element"><a [routerLink]="['scopeMapping']"><i class="fa fa-fw fa-angle-right "></i> mapping des scopes</a></li>
                <li class="element"><a [routerLink]="['scope']"><i class="fa fa-fw fa-angle-right "></i> scope</a></li>
            </ul></li>
        <li *ngIf="edit" class="element"><a [routerLink]="['import']"><i class="fa fa-fw fa-arrow-alt-circle-up  "></i> import</a></li>
        <li class="element"><a [routerLink]="['export']"><i class="fa fa-fw fa-arrow-alt-circle-down  "></i> export</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-cogs"></i> administration <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li class="element"><a [routerLink]="['catalog']"><i class="fa fa-fw fa-angle-right "></i> catalogue</a></li>
                <li class="element"><a [routerLink]="['mappingType']"><i class="fa fa-fw fa-angle-right "></i> type de mapping</a></li>
                <li class="element"><a [routerLink]="['mappingSystem']"><i class="fa fa-fw fa-angle-right "></i> système de mapping</a></li>
                <li class="element"><a [routerLink]="['entityType']"><i class="fa fa-fw fa-angle-right "></i> type d'entité</a></li>
                <li class="element"><a [routerLink]="['relationType']"><i class="fa fa-fw fa-angle-right "></i> type de relation</a></li>
                <li class="element"><a [routerLink]="['propertyType']"><i class="fa fa-fw fa-angle-right "></i> propriété</a></li>
                <li class="element"><a [routerLink]="['mappingContext']"><i class="fa fa-fw fa-angle-right "></i> contextes de mapping</a></li>         
                <li *ngIf="admin" class="element"><a [routerLink]="['users']"><i class="fa fa-fw fa-angle-right "></i> gestion des utilisateurs</a></li>
                <li class="element"><a [routerLink]="['version']"><i class="fa fa-fw fa-angle-right "></i> gestion de versions</a></li> 
            </ul>
        </li>
    </ul>
</div>

这是我的 component.ts 的代码：

import { Component } from '@angular/core';
import { RouterModule, Router, Routes } from '@angular/router';
declare var $: any;

@Component({
    selector: 'side-menu',
    templateUrl: './side-menu.component.html',
    styleUrls: ['./side-menu.component.css']
})
export class sideMenuComponent {
    admin : boolean = false;
    edit : boolean = true;
    ngOnInit(){
        if(localStorage.getItem('role')=="ROLE_ADMIN"){
            this.admin = true;
        }
        if(localStorage.getItem('role')=="ROLE_VIEW"){
            this.edit = false;
        }
    }

    ngAfterViewInit() {
        $(document).on('click', '.element', function (e) {
            $('.element.activ').toggleClass('activ');
            $(this).toggleClass('activ');
        });

        $(document).on('click', '.sidebar-nav li a', function (e) {
            $('.element.activ').toggleClass('activ');
        });

        $(document).on('click', ':not(.sidebar-nav li.open a)', function (e) {
            e.stopPropagation();
        });
/* remove if classe is active */
        $('.nav a').on('click', function () {
            $('.nav').find('.activ').removeClass('activ');
        });
    }
}

这是我的css代码：

  /*.woll {
    margin-bottom: -21px;
}

.ssilka a{
    color:#0080C0;
}

.ssilka a:hover{
    color:#0080C0;
}

.list-group-item:last-child {
    border-radius: 0;
}

.list-group-item:first-child{
    border-radius: 0;
}
.side-menu{
    width: 20%;
}*/
#sidebar-wrapper { 
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  background: #222;
  height: 100%;
  width: 180pt;
  left: 180pt;
  margin-left: -180pt;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  z-index:-5;
}
#sidebar-wrapper::-webkit-scrollbar {
  display: none;
}
#sidebar-wrapper.toggled{
    left:0;
}

.nav .open > a { background-color: transparent; }

.nav .open > a:hover { background-color: transparent; }

.nav .open > a:focus { background-color: transparent; }

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 70pt;
  width: 180pt;
}

.sidebar-nav li {
  display: inline-block;
  line-height: 14pt;
  position: relative;
  width: 100%;
}

.sidebar-nav li:before {
  -moz-transition: width 0.2s ease-in;
  -ms-transition: width 0.2s ease-in;
  -webkit-transition: width 0.2s ease-in;
  background-color: #1c1c1c;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 3pt;
  z-index: -1;
}

/*.sidebar-nav li:first-child a {
  background-color: #222;
  color: #ffffff;
}*/

.sidebar-nav li:nth-child(1):before, .sidebar-nav li:nth-child(1).open, .sidebar-nav li:nth-child(1).activ { background-color: #F55000; }

.sidebar-nav li:nth-child(2):before, .sidebar-nav li:nth-child(2).open, .sidebar-nav li:nth-child(2).activ { background-color: #F6590D; }

.sidebar-nav li:nth-child(3):before, .sidebar-nav li:nth-child(3).open, .sidebar-nav li:nth-child(3).activ  { background-color: #F7621A; }

.sidebar-nav li:nth-child(4):before, .sidebar-nav li:nth-child(4).open, .sidebar-nav li:nth-child(4).activ  { background-color: #F86B27; }

.sidebar-nav li:nth-child(5):before, .sidebar-nav li:nth-child(5).open, .sidebar-nav li:nth-child(5).activ  { background-color: #F97435; }

.sidebar-nav li:nth-child(6):before, .sidebar-nav li:nth-child(6).open, .sidebar-nav li:nth-child(6).activ  { background-color: #FA7D42; }

.sidebar-nav li:nth-child(7):before, .sidebar-nav li:nth-child(7).open, .sidebar-nav li:nth-child(7).activ  { background-color: #FB864F; }

.sidebar-nav li:nth-child(8):before, .sidebar-nav li:nth-child(8).open, .sidebar-nav li:nth-child(8).activ  { background-color: #FC8F5D; }

.sidebar-nav li:nth-child(9):before, .sidebar-nav li:nth-child(9).open, .sidebar-nav li:nth-child(9).activ  { background-color: #FD986A; }

.sidebar-nav li:nth-child(10):before, .sidebar-nav li:nth-child(10).open, .sidebar-nav li:nth-child(10).activ  { background-color: #FEA177; }

.sidebar-nav li:nth-child(11):before, .sidebar-nav li:nth-child(11).open, .sidebar-nav li:nth-child(11).activ  { background-color: #FFAB85; }

.sidebar-nav li:hover:before {
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 100%;
}

.sidebar-nav li a {
  color: #dddddd;
  display: block;
  padding: 7pt 10pt 7pt 20pt;
  text-decoration: none;
}

.sidebar-nav li.open:hover before {
  -webkit-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
  width: 100%;
}

.sidebar-nav .dropdown-menu {
  background-color: #333;
  border-radius: 0;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

.sidebar-nav .dropdown-menu li a{
  margin-left: 10pt;
}

.sidebar-nav li.open a, .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus {
  background-color: transparent;
  color: #ffffff;
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  font-size: 14pt;
  height: 52pt;
  line-height: 30pt;
}

.caret{
    float: right;
}

问题是这段代码在导入导出按钮上不起作用，真不知道是哪里出错了！

期待您的回复！您的帮助将非常有用，如果我的问题很愚蠢，我很抱歉，但我仍然只是这个框架的初学者。

提前感谢您的回复！

【问题讨论】：

  • 您是否尝试过使用!important？您正在使用的 CSS 库可能会覆盖您的颜色语句。通过使用!important，您指定放置它的 CSS 行是最重要的，不应被其他任何内容覆盖。更多信息可以在这里找到geeksforgeeks.org/how-to-apply-important-in-css 即.sidebar-nav li:nth-child(1):before, .sidebar-nav li:nth-child(1).open, .sidebar-nav li:nth-child(1).activ { background-color: #F55000 !important; }
  • Angular 中的 Jquery！？ Staawp Now 然后，使用内置的状态内容...
  • AngularJS 和 Angular 是两个不同的框架。请仅使用相关的标签更新您的标签。
  • 你好，我使用了 !important 但它仍然没有解决我的问题

标签： javascript html css angular


【解决方案1】：

在 Angular 中，有很多方法可以做到这一点。基本上，它只是状态控制。

对于这个例子，我在类中使用了一个属性，但你也可以在一个对象或任何其他东西上使用一个属性（比如从函数中返回一个类）。

不要使用 JQuery

JQuery 是很棒，但在 Angular 中，不要这样做。 Angular 提供了更好的方法来更新 DOM，而无需重写 Angular 所做的所有 OoTB。

可以看例子in Action here

但重要的部分：

<button type="button" [ngClass]="{'blue-button' : isBlue }" (click)='toggleButtonClass()'>Click Me</button>

一个带有点击事件的按钮，以及一个基于布尔值状态的类。

按钮的一点 CSS：

.blue-button {
 background-color:blue;
 color:white;
 }

最后是切换类的功能：

public toggleButtonClass(){
   this.isBlue = !this.isBlue;
}

此外，您可以有一个“按钮”对象数组，例如：

export class Button implements IButton {
Text: string;
Value: string;
IsSelected?: boolean = false;
}

然后生成做同样事情的控件：

<div *ngFor="let button of Buttons">
   <button type="button" 
      (click)="toggleSelectedButton(button)" 
      [ngClass]="{'blue-button' : button.IsSelected}">{{button.Text}}
   </button>
</div>

【讨论】：

  • 但是我的代码不正确吗？因为在其他按钮上它工作得很好，只是导出和导入按钮不起作用，我可能忘了放一些东西或一个小错误让我逃脱。你不能通过我的代码帮我解决我的问题吗？
  • @Nawfalbougrine 老实说，我说 JQuery 只是想：“这太糟糕了，放弃它”。也就是说，您还为侧边栏上的链接使用路由？您也可以根据当前路线使用 ngClass ...今天转储 JQuery 的任何东西都比使用您的代码更好...
  • 我测试了你的代码，但它在这里不起作用是我所做的：在我的 html 级别我输入：
  • import
    • 并在我的 .ts 级别放置：public isOrange = false;public toggleButtonClass () {this.isOrange =! this.isOrange;}并在我的css级别上放置：.orange-button {background-color: #FFAB85;color: white;}但它不起作用我仍然有同样的错误，请问该怎么做？
【解决方案2】：

我建议您使用HostListener 和HostBinding，因此您可以创建一个指令，例如在点击时更改颜色，然后在任何您想要的地方重复使用它。

请看一下这个例子

  @Directive({
  selector: `[appHighlight]`
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer) { }

  @HostListener('document:click', ['$event'])
  handleClick(event: Event) {
    if (this.el.nativeElement.contains(event.target)) {
      this.highlight('yellow');
    } else {
      this.highlight(null);
    }
  }

  highlight(color) {
    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

然后在html中

<div>
  <p appHighlight>
    <span>Text to be highlighted</span>
  </p>
</div>

您可以在 this page 上找到一个工作示例。

【讨论】：

  • 但是我的代码不正确吗？因为在其他按钮上它工作得很好，只是导出和导入按钮不起作用，我可能忘了放一些东西或一个小错误让我逃脱。你不能帮我通过我的代码解决我的问题吗？
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode