JSFiddle - React, Tailwind, and code Playground

by bingjie2680

HTML

<nav>
            <ul>
                <li><a class="menu-option" id="about" href="about.html">About</a></li>
                <li><a class="menu-option" id="trainer" href="#">Trainer / Consultant</a></li>
                <li><a class="menu-option" id="testimonial" href="#">Testimonials</a></li>
                <li><a class="menu-option" id="programs" href="#">Programs</a></li>
                <li><a class="menu-option" id="contact" href="#">Contact us</a></li>
            </ul>
        </nav>

JavaScript

$(document).ready(function() {
     page = "about.html";
    switch (page)
    {
        case "about.html":
            $(".menu-option").css('color', 'white');
            $("#about").css('color', '#E45C02');
            break;
        case "trainer.html":
            $(".menu-option").css('color', 'white');
            $("#trainer").css('color', '#E45C02');
            break;
        case "programs.html":
            $(".menu-option").css('color', 'white');
            $("#programs").css('color', '#E45C02');
            break;
        case "testimonial.html":
            $(".menu-option").css('color', 'white');
            $("#testimonial").css('color', '#E45C02');
            break;
        case "contact.html":
            $(".menu-option").css('color', 'white');
            $("#contact").css('color', '#E45C02');
        default:
            $(".menu-option").css('color', 'white');
            break;
    }


});