JSFiddle - React, Tailwind, and code Playground

HTML

<a class="inactive" href="page1.html">текст ссылки 1</a>
<a class="inactive" href="page2.html">текст ссылки 2</a>
<a class="inactive" href="pageimg.html"><img></a>

<p><a id="trigger"></a></p>

CSS

a.inactive{
    cursor:default;
    text-decoration:none;
    color:#000;
}

JavaScript

var triggerOn="Активировать ссылки!";
var triggerOff="Деактивировать ссылки!";
$("a").click(function(){if($(this).hasClass("inactive")) return false;});
$("#trigger").toggle(function(){$("a").each(function(index){$(this).removeClass("inactive")}); $(this).text(triggerOff);},function(){$("a").each(function(index){$(this).addClass("inactive")});$(this).text(triggerOn);});        
$("#trigger").text(triggerOn);