JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="navig__menu">
<div class="navig__eat">
<ul class="navig__menu__eat">
<li>
<a id="one" class="number__one" href="#">pizza cartoon</a>
</li>
<li>
<a id="two" class="number__two" href="#">Burger</a>
</li>
<li>
<a id="thre" class="number__thre" href="#">sandwich</a>
</li>
<li>
<a id="fore" class="number__fore" href="#">LOREMISPSUM</a>
</li>
</ul>
</div>
</div>
<div id="one__second" class="block__menu one dnone">
<div class="block__menu__burger">
<div class="block__number">
<div class="number">
<p>1</p>
</div>
<div class="block__img">
<img src="img/main/number/Layer 1.png" alt="">
</div>
</div>
<div class="block__name">
<p>create it</p>
</div>
<div class="description__menu">
<p>Choose from a selection of tastilicious toppings to create your own pizza</p>
</div>
</div>
<div class="block__menu__burger">
<div class="block__number">
<div class="number">
<p>2</p>
</div>
<div class="block__img">
<img src="img/main/number/Layer 2.png" alt="">
</div>
</div>
<div class="block__name">
<p>name it</p>
</div>
<div class="description__menu">
<p>Choose from a selection of tastilicious toppings to create your own pizza</p>
</div>
</div>
</div>
CSS
.dnone{
display: none;
}
.dflex{
display: flex;
}
JavaScript
$(document).on('focus', '.navig__menu a', function(e){
e.preventDefault();
var id = $(this).attr('id');
$('.block__menu').removeClass('dnone dflex');
$('.'+id).toggleClass('dflex');
});