JSFiddle - React, Tailwind, and code Playground

by Simon Hi

HTML

<div id="menu">
  <a class="button bt1" href="#entete">Acceuil</a>
  <a class="button bt2" href="#img1">Green</a>
  <a class="button bt3" href="#img2">Blue</a>
  <a class="button bt4" href="#img3">Red</a>
</div>

CSS

.button
{
    background-color: #CC0033;
    padding: 10px 15px;
	width: auto;
	height: auto;
	margin: 0px 0px 0px -1px;
	color: #000000;
	font-family: 'PT Sans', sans-serif;
	border-spacing: 0px 0px;
}

.button:hover
{
	background-color: rgba(0,0,0,0.1);
	color: #FFFFFF;
}

.entete .bt1,
.img1 .bt2,
.img2 .bt3,
.img3 .bt4 {background-color: rgba(0,0,0,0.1); color: #FFFFFF;}

JavaScript

var oRadio = document.querySelectorAll('.button'), i, nb=oRadio.length;

for( i = 0; i <nb; i++)
{
    oRadio[i].onclick = function(){
        var str = this.getAttribute("href");
        document.body.className = str.replace('#', '');
    };
}