JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#a1" id="a1">Главная</a>
    <li><a href="#a2" id="a2">Каталог</a>
    <li><a href="#a3" id="a3">Прайс</a>
    <li><a href="#a4" id="a4">Контакты</a>
</ul>

CSS

body { background: #0a0; }
ul { border-bottom: 1em solid #fff; font: 20px/1 sans-serif; }
li { display: inline; }
li a { display: inline-block; color: #fff; background: #0a0; text-transform: uppercase; padding: .5em 1em; text-decoration: none; }
a:hover, a:focus, a:target { color: #0a0; background: #fff; outline: 0; }
ul:hover a { color: #fff; background: #0a0; }
ul:hover a:hover { color: #0a0; background: #fff; }

JavaScript

document.getElementsByTagName('a')[0].click();