时间戳

首页 > 解决方案 > 根据幻灯片类别更改文本的 jQuery 代码

jquery - 根据幻灯片类别更改文本的 jQuery 代码

问题描述

我正在尝试根据第一张幻灯片是否有类来更改导航的文本颜色，您可以在www.zadroinc.com"flex-active-slide"看到导航。

我正在使用这段代码：

$(document).ready(function() {
 if ($(".slide").eq(0).hasClass("flex-active-slide")) {
   $(".z-nav > li > a").css("color", "white"); 
 } else { 
   $(".slide").eq(1).hasClass("flex-active-slide");
   $(".z-nav > li > a").css("color", "black"); }
});

我遇到的是它改变了颜色，但是当幻灯片改变时它不会再这样做了。

标签： jquery

解决方案

您的函数仅在文档准备好时运行一次，无论您运行什么事件或时间驱动的代码来更改站点上的幻灯片，这都是合并您的函数以更改导航锚元素的 css 的最佳位置。

如果由于某种原因您无法将更改 CSS 的代码合并到已经运行以更改幻灯片的脚本中，那么您可以尝试根据“锚链接”中发生的 CSS 转换来触发 CSS 更改幻灯片”分类 li 元素。

$('.slide a').on('transitionend', function() {
  // get index of transitioned anchor element's parent slide
  var slideIndex = $(this).parent().index();
  if (slideIndex === 0) {
    $('.z-nav > li > a').css('color', 'white');
  } else {
    $('.z-nav > li > a').css('color', 'black');
  }
});

推荐阅读