JSFiddle - React, Tailwind, and code Playground

by neverov12

HTML

<div class="block">
<nav class="navigation">
        <ul class="block--left-list">
          <li class="block--left-item">
            <a class="link-1" href="#">отделка</a>
          </li>
          <li class="block--left-item">
            <a class="link-2" href="#">архитектура</a>
          </li>
          <li class="block--left-item">
            <a class="link-3" href="#">планировки</a>
          </li>
        </ul>
</nav>
<div class="logo"></div>
</div>

CSS

.block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 600px;
}

.logo {
  width: 100px;
  height: 100px;
  background-color: #000;
}
.logo.

a {
  text-decoration: none;
  color: #000;
  font-size: 40px;
}

li {
  list-style-type: none;
}

.active-black {
  color: black;
  fill: black;
}
.active-green {
  color: yellowgreen;
  fill: yellowgreen;
}
.active-blue {
  color: aqua;
  fill: aqua;
}

.active-violet {
  color: darkmagenta;
  fill: darkmagenta;
}

JavaScript

let colorsClass = ['active-green', 'active-blue', 'active-violet'];

$(document).ready(function () {
  $('li.block--left-item a').click(function () {
  	$('li.block--left-item a').removeClass();
    
    if ($(this).hasClass('active-green') || $(this).hasClass('active-blue') || $(this).hasClass('active-violet')) {
      $(this).removeClass();
    }
    const randomClassname = randClass();
    $(this).addClass(randomClassname);
    $('.logo').removeClass().addClass(randomClassname + ' logo');
  });
});

//Функция рандомного класса из массива

function randClass() {
  let randomClass = colorsClass[Math.floor(Math.random() * colorsClass.length)];
  return randomClass;
};