We suggest looking at 3 different ways to highlight links to the current page using CSS.
The first way – HTML/CSS
I noticed that WordPress automatically adds a class for the active clicked link. You can see this if you open the source code of the site.
In the source code you can see that the class “current-menu-item” has been added to the active link. This means that we can add any style to this class.
Пример:
Open the CSS file of the template and enter this code:
#menu li .current-menu-item a{color:#сс0000;}Note: This code will work if your menu has been taken in a block like mine:
<div id="menu">your menu (I displayed the menu via a widget)</div>I will now share how to highlight an active link for absolutely any site using just a little JavaScript and CSS code.
2 ways on Java Script / CSS
I want to offer you ready-made code in JavaScript, which will automatically prescribe the class ” act” to the active menu link that links to the current page. This code is easily embedded in any design, template and any CMS (Joomla, WordPress, etc.).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="https://www.w3.org/1999/xhtml">
<head><title></title></head>
<body>
<style ENGINE="text/css">
body{font: 14px/normal Verdana,sans-serif;}
a{text-decoration:none;color:#999;}
a:hover{color:#666;}
a.act{color:#F00;}
</style><div id="msgText">
<a href="1.html">Link1</a>
<a href="2.html">Link2</a></div>
<scripttype="text/javascript">
try{
var el=document.getElementById('msgText').getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el[i].href){
el[i].className += ' act';}
;}
;}
catch(e){}</script>
</body>
</html>Note paragraph 5 to 10 in the code.
<style type="text/css">body{font: 14px/normalVerdana,sans-serif;}a{text-decoration:none;color:#999;}a:hover{color:#666;}a.act{color:#F00;}</style>Here you change the appearance of the menu, using the knowledge of CSS.
There is another way of solving this problem, also using JavaScript.
window.onload = clearCurrentLink;
function clearCurrentLink(){
var a = document.getElementsByTagName("A");
for(var i=0;iWhichever way you prefer, that’s your choice.
