Изменение и сохранение цвета фона при нажатии - React TS, HTML, SCSS - PullRequest
Новая
       16

Изменение и сохранение цвета фона при нажатии - React TS, HTML, SCSS

0 голосов
/ 04 февраля 2020

В настоящее время я делаю swiper. И мне нужно изменить и сохранить цвет фона метки на клике. Я использовал CSS: активен, чтобы изменить цвет при нажатии, но мне нужно, чтобы он оставил цвет фона. Возможно, мне нужно использовать и активную опору, но я новичок в этом и мне нужна помощь.

Код ниже:

HTML & React TS 

import * as React from "react";
import styles from "./Swiper.module.scss";
import { escape } from "@microsoft/sp-lodash-subset";

export default class Swiper extends React.Component {
  public render(): React.ReactElement {
    return (
      <div className={styles.swiperWrapper}>
        <div className={styles.swiper}>
          <div className={styles.slides} id="slide-1">
            1
          </div>
          <div className={styles.slides} id="slide-2">
            2
          </div>
          <div className={styles.slides} id="slide-3">
            3
          </div>
        </div>
        <div className={styles.swiperContainer}>
          <a href="#slide-1"></a>
          <a href="#slide-2"></a>
          <a href="#slide-3"></a>
        </div>
      </div>
    );
  }
}

S CSS

.swiperWrapper {
    min-width: 1920px;
    height: 544px;

    .swiper {
        width: 100%;
        height: 73.5%;
        display: flex;
        overflow-x: auto;

        -webkit-animation-scrolling: touch;
        scroll-snap-type: x mandatory;

        .slides {
            width: 100%;
            height: 100%;
            flex-shrink: 0;
            scroll-behavior: smooth;
            border: 1px solid blue;
        }

        .slides > div {
            scroll-snap-align: start;
        }
    }

    .swiperContainer {
        width: 100%;
        height: 26.5%;
        display: flex;
        justify-content: center;
        align-items: center;
        a {
            border-radius: 7px;
            transform: rotate(45deg);
            width: 15px;
            height: 15px;
            border: solid 1px #707070;
            margin-right: 20px;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
        }

        a:active {
            background-color: #707070;
        }
    }

}

Заранее спасибо всем, кто помогает ...

...