1

Предположим есть несколько ссылок, при на ведении на них они выделяются оранжевым цветом, а как сделать так чтобы, например, если кликнуть на ссылку Имя то она станет красной, а все остальные останутся по умолчанию черными, если кликнуть на другую ссылку то она уже станет красной, а Имя станет обратно черным.

.sorting {
  cursor: pointer;
  font-weight: bold;

}

.sorting:hover {
  cursor: pointer;
  color:#FF8C00;
}
<a class="sorting" (click)="sortType('name')" title="Сортировать по имени" [class.active]="sortBy === 'name'" >Имя⬇</a>
<a class="sorting" (click)="sortType('surname')" title="Сортировать по имени" [class.active]="sortBy === 'surname'" >Фамилия⬇</a>
<a class="sorting" (click)="sortType('patronymic')" title="Сортировать по имени" [class.active]="sortBy === 'patronymic'" >Отчество⬇</a>

2 ответа 2

2

var a = document.getElementsByTagName('a');
for (let i = 0; i < a.length; i++) {
  a[i].addEventListener('click', function() {
    for (let i = 0; i < a.length; i++) {
      a[i].style.color = 'black';
    }
    a[i].style.color = 'red';
  })
}
.sorting {
  cursor: pointer;
  font-weight: bold;
}

.sorting:hover {
  cursor: pointer;
  color: #FF8C00;
}
<a class="sorting" (click)="sortType('name')" title="Сортировать по имени" [class.active]="sortBy === 'name'">Имя⬇</a>
<a class="sorting" (click)="sortType('surname')" title="Сортировать по имени" [class.active]="sortBy === 'surname'">Фамилия⬇</a>
<a class="sorting" (click)="sortType('patronymic')" title="Сортировать по имени" [class.active]="sortBy === 'patronymic'">Отчество⬇</a>

2
  • А без скрипта не получится?
    – Yumi
    26 янв 2018 в 11:30
  • humster_spb, уже ответил на твой комент
    – Air
    26 янв 2018 в 13:10
1

Можно и без скрипта, конечно (хотя это явный "костыль"):

.sorting {
  cursor: pointer;
  font-weight: bold;

}

.sorting:hover {
  cursor: pointer;
  color:#FF8C00;
}

input {
  display: none;
}

#name:checked ~ label .name,
#surname:checked ~ label .surname, 
#patronymic:checked ~ label .patronymic {
  color: red;
}
<input type="radio" name="radio" id="name" />
<label for="name"><a class="sorting name" (click)="sortType('name')" title="Сортировать по имени" [class.active]="sortBy === 'name'" >Имя⬇</a></label>

<input type="radio" name="radio" id="surname" />
<label for="surname"><a class="sorting surname" (click)="sortType('surname')" title="Сортировать по имени" [class.active]="sortBy === 'surname'" >Фамилия⬇</a></label>

<input type="radio" name="radio" id="patronymic" />
<label for="patronymic"><a class="sorting patronymic" (click)="sortType('patronymic')" title="Сортировать по имени" [class.active]="sortBy === 'patronymic'" >Отчество⬇</a></label>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.