typescript - 在活动离子滑梯上实现“活动”CSS类

Question

我想更改 DOM 中活动幻灯片的 css

.html

 <ion-slides>
  <ion-slide class="swiper-slide"></ion-slide>
  <ion-slide class="swiper-slide active"></ion-slide> // <-- Active slide in DOM
  <ion-slide class="swiper-slide"></ion-slide>
 </ion-slides>

提前致谢..

.scss

  .slider_selected_text{
    color : #ed1a3b
    }
 .slider_unselected_text{
   }

标签： typescriptangular6ionic4

Answer 1

很难判断您是要求将active类添加到sccs侧面还是动态地将 CSS 类添加到ion-slide元素。我假设你在问scss边。如果不是这样，请告诉我，我会更新答案。

您可以像这样将.active类添加到scss文件中：

.swiper-slide {

   // Assuming "slider_selected_text" is covered by "swiper-slide" class

  & .slider_selected_text{ // note that there is a space between & and class name
    color : #ed1a3b
  }

  & .slider_unselected_text{

  }

  &.active{ // note that there is NOT a space between & and class name means this will apply to the elements having both classes

     & .slider_selected_text{ // note that there is a space between & and class name
        color : #ed1a3b
      }

      & .slider_unselected_text{

      }
  }

}

希望这会给你一个线索。