JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<ul class="menu_1">
    <li>главая</li>
    <li>экскурсия по залу</li>
    <li>прейскурант</li>
    <li>наши тренеры</li>
    <li>контакты</li>
</ul>

<br>
    <br>
        <br>
<br>
    <a href="#"><div class="ddi"> CLICK ME </div></a>
<div id="one">1</div>
<div id="two">1</div>
<div id="three">2</div>
<div id="four">3</div>
  <div id="five">4</div>

CSS

* {
    padding:0;
    margin:0;
}
body {
    font-family:"Arial Narrow";
    font-size:12px;
}
ul.menu_1 {
    zoom:1;
    position:relative;
    list-style:none;
    float:left;
}
ul li {
    text-transform:uppercase;
    border:2px solid white;
    border-radius:5px;
    float:left;
    position:relative;
    padding:10px 15px;
    display:block;
    margin:0 5px;
}
ul li:hover {
    border:2px solid white;
    color:white;
    box-shadow:0 1px 3px #333;
    background:#b1d937;
}

#one, #two, #three, #four, #five {
color:yellow;
    
}

JavaScript

var arr = [ "one", "two", "three", "four", "five" ];

$('.ddi').click(function(){
$.each(arr, function() {
      $("#" + this).css('color' , 'red');
});
});