Imagine I have the following HTML structure:
<div class=".blog-item-holder">
<div id="AAAA"><div class="inner">AAAA</div></div>
<div id="BBBB"><div class="inner">BBBB</div></div>
<div id="CCCC"><div class="inner">CCCC</div></div>
<div id="DDDD"><div class="inner">DDDD</div></div>
</div>
Now, each URL will be structured like this:
example.com/page/#AAAA
and
example.com/page/#BBBB
and
example.com/page/#CCCC
and
example.com/page/#DDDD
The goal is to have the div#BBBB .inner with a black background when someone visits a specific page (example.com/page/#BBBB), and the same treatment for other links (for CCCC, DDDD, etc).
Here is the JavaScript code I have so far:
if(window.location.hash) {
var hash = window.location.hash.substring(1),
boxes = [];
$('.blog-item-holder > div').each(function(){
if ($(this).attr('id') == hash) {
$(this).children('div').css("background-color:#000000;");
}
});
}
Unfortunately, it seems that the script is not working as intended.