Active Link bei Beitrag
Hallo,
ich bekomme eine Linkfarbe in CSS nicht hin und bräuchte bitte mal Eure Hilfe.
Und zwar habe ich z.B. einen Beitrag in der Kategorie "Barbados" in Wordpress mit folgender URL:
localhost/reiseberichte/barbados/schnorcheln-mit-schildkroeten-carlisle-bay
In der Sidebar habe ich eine Linkliste mit Ländernamen. Da ist unter anderem auch "Barbados" dabei. Da dieser Beitrag ja zu Barbados gehört, hätte ich gerne, dass der Link "Barbados" in der Linkliste beim Aufruf des Beitrags als active in einer anderen Farbe dargestellt wird. Wie mache ich das?
Der hier verwendete Code
<style>
ul{
display:flex;
}
ul li{
flex:1;
list-style:none;
font-size:22px;
}
</style>
<body class="archive category category-bahamas category-727">
<nav>
<ul>
<li>
<a id="category-727" href="#">link1</a>
</li>
<li>
<a id="category-728" href="#">link2</a>
</li>
<li>
<a id="category-729" href="#">link3</a>
</li>
<li>
<a id="category-730" href="#">link4</a>
</li>
</ul>
</nav>
<main>
Wenn man jetzt im code die Zahl der Klasse auf 727,728,729 oder 730 ändert wird in der Navigation der andere Link gefärbt
<script>
classen_body=document.getElementsByTagName('body')[0];
j=classen_body.className;
h=j.split(' ');
a_code=document.querySelectorAll('nav ul li a');
a_code.forEach((z)=>{
id=z.id;
console.log(id)
for(k=0;k<=h.length-1;k++){
if(h[k]==id){
console.log(h[k]+'='+id);
document.getElementById(id).style.color="red";
}
}
});
</script>
</body>
</html>