尝试使链接在html中单击时看起来不同

好吧，我已经看到了一些类似的问题，但是我找不到我需要的解决方案，因此我试图做到这一点，以便当用户在加载页面时从网站上的一个页面移动到另一个页面时，标签应更改颜色并保持这样我尝试使用此代码，但它根本不起作用，这里是代码的html

 <div id="button-group" style="width:100%">
        <a href="#surprise"><img src="felix.png" id="cat" ></a>
        <a href="C:\xampp\htdocs\project\home.html" style="width:10%" class="button">home</a>
        <a href="C:\xampp\htdocs\project\Hobbies.html" id="hobbies" style="width:10%" class="button">Hobbies</a>
        <a href="#contact_us " style="width:10%" class="button">Contact</a>
        <a href="C:\xampp\htdocs\project\Services.html" style="width:10%" class="button">Services</a>
    </div>

因此，例如，如果我在“兴趣爱好”页面上并单击主页，则主页应将颜色变为蓝色，或者如果我在兴趣爱好上并且单击它，它也应更改颜色加载 这是我尝试过的jQuery

$(document).ready(function(){
    $("#hobbies").trigger('.click');
});

这是触发时的css

.a :click {
  background-color:rgba(0, 183, 255, 0.788);
  }