Vadim Lyutsko's questions

该函数必须使用滑块的特定索引 (id) 触发；它在放置滑块时触发，而不是在 onClick 时触发。PS我在API中没有看到任何内容......

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import './TabsSwiper.scss';
import { Navigation } from 'swiper/modules';

const navigatePanel = [
  { label: 'Исследования', id: '1' },
  { label: 'Дизайн', id: '2' },
  { label: 'Разработка', id: '3' },
  { label: 'Тестирование', id: '4' },
  { label: 'Аутстафф', id: '5' },
  { label: 'Поддержка', id: '6' },
];
type TabsSwiperPropsType = {
  handleTabClick: (index: string) => void;
};

const TabsSwiper: React.FC<TabsSwiperPropsType> = ({ handleTabClick }) => {
  return (
    <Swiper
      modules={[Navigation]}
      navigation
      loop
      onSlideResetTransitionEnd={function () {
        console.log('*** mySwiper.realIndex', Swiper);
      }}
      onSlideChange={() => console.log('slide change')}
    >
      {navigatePanel.map((item) => {
        return (
          <div key={item.id} className="swiperContainer">
            <SwiperSlide>
              <p
                onClick={() => {
                  handleTabClick(item.id);
                }}
              >
                {item.label}
              </p>
            </SwiperSlide>
          </div>
        );
      })}
    </Swiper>
  );
};

export default TabsSwiper;

无法使用mix-blend-mode: difference;。尝试了很多次但没有任何效果

下面是块本身的 JSX 和 SCSS。

.menu {
  color: $Black-color;
  top: 60px;
  position: fixed;
}

.navigate ul {
  margin-bottom: 40px;
}

.logoContainer {
  margin-bottom: 29px;
}

.chapter {
  font-size: 24px;
  .chapterLink {
    color: #040404;
  }
}

.chapter:not(:last-child) {
  margin-bottom: 20px;
}

.consultation {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
  width: 188px;
  max-height: 78px;
  display: flex;
  padding: 20px;
  align-items: center;
  border-radius: 12px;
  border: 2px solid $Black-color;
  text-align: start;
}

<div className={styles.menu}>
  <nav className={styles.navigate}>
    <ul>
      <li className={styles.chapter}>
        <Link className={styles.chapterLink} href={ '#'}> Текст, который должен менять цвет...
        </Link>
      </li>
    </ul>
  </nav>
</div>

块，当通过时颜色应该改变：

.contentBlack {
  background-color: $Black-color;
  max-width: 1700px;
  padding: 0 10px;
  margin: 0 auto;

  @media screen and (max-width: $Mobile) {
    max-width: 446px;
    padding: 0 16px;
  }
}