JSFiddle - React, Tailwind, and code Playground
HTML
<div class="dot-nav">
<a href="#" class="scroll-link" data-id="home" id="home-btn">
<img src="https://www.currintly.com/images/nav-s.png" id="btn-home-s" style="margin-bottom:10px;"/>
<img src="https://www.currintly.com/images/nav-ns.png" id="btn-home-ns" style="margin-bottom:10px;display:none;"/>
</a><br>
<a href="#" class="scroll-link" data-id="about" id="about-btn">
<img src="https://www.currintly.com/images/nav-ns.png" id="btn-about-ns" style="margin-bottom:10px;"/>
<img src="https://www.currintly.com/images/nav-s.png" id="btn-about-s" style="margin-bottom:10px;display:none;"/>
</a><br>
<a href="#" class="scroll-link" data-id="power" id="power-btn">
<img src="https://www.currintly.com/images/nav-ns.png" id="btn-power-ns" style="margin-bottom:10px;"/>
<img src="https://www.currintly.com/images/nav-s.png" id="btn-power-s" style="margin-bottom:10px;display:none;"/>
</a><br>
</div>
CSS
.dot-nav
{background:#000;}
JavaScript
$( "#home-btn" ).click(function() {
$( "#btn-home-ns" ).hide(0);
$( "#btn-about-s" ).hide(0);
$( "#btn-power-s" ).hide(0);
$( "#btn-home-s" ).show(0);
$( "#btn-about-ns" ).show(0);
$( "#btn-power-ns" ).show(0);
});
$( "#about-btn" ).click(function() {
$( "#btn-home-s" ).hide(0);
$( "#btn-about-ns" ).hide(0);
$( "#btn-power-s" ).hide(0);
$( "#btn-home-ns" ).show(0);
$( "#btn-about-s" ).show(0);
$( "#btn-power-ns" ).show(0);
});
$( "#power-btn" ).click(function() {
$( "#btn-home-s" ).hide(0);
$( "#btn-about-s" ).hide(0)
$( "#btn-power-ns" ).hide(0);
$( "#btn-home-ns" ).show(0);;
$( "#btn-about-ns" ).show(0);
$( "#btn-power-s" ).show(0);
});