Как сделать смену цвета текста в зависимости от секции?

Question

[NisXan]

Здравствуйте, сайт имеет примерно такую конструкцию:

<div class="page-content">
   <section id="1">...</section>
   <section id="2">...</section>
   <section id="3">...</section>
   <section id="4">...</section>
   <section id="5">...</section>
   <section id="6">...</section>
<div>

Используется библиотека Scrollify.js для прокрутке по секциям.
Справа расположено фиксированное меню dotnav от Uikit

<ul class="uk-dotnav uk-flex-column" data-uk-scrollspy-nav="{closest: 'li', smoothscroll:{offset: 0}}">
<li><a href="#1">Главная</a></li>
<li><a href="#2">Услуги</a></li>
<li><a href="#3">Работы</a></li>
<li><a href="#4">Цены</a></li>
<li><a href="#5">Блог</a></li>
<li><a href="#6">Контакты</a></li>
</ul>

Как сделать чтобы цвет текста меню менялся скажем так: на 1, 3 и 5 белый цвет, а на 2, 4 и 6 чёрный цвет текста.

Класс текста:

.sp-module ul >li >a {
    color: #000;
}

Answer 1

[NisXan]

Пробовал так, но почему то не работает.

<script type="text/javascript">
if (window.location.pathname == '/#1' || window.location.pathname == '/#3' || window.location.pathname == '/#5'|| window.location.pathname == ''|| window.location.pathname == '/'|| window.location.pathname == '/index.php')
{
$(".sp-module ul >li >a").css("color", "#000")
}
</script>