When the url hash match a div's id then do something to the child of the div

Question

Let's say I have the html as below:

<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>

So reach of my url will be reset like this:

example.com/page/#AAAA
and
example.com/page/#BBBB
and
example.com/page/#CCCC
and
example.com/page/#DDDD

All I want is when people go to the page (for example: example.com/page/#BBBB) then the div#BBBB .inner will have a black back-ground, and same treatment for the url has has for CCCC, DDDD etc.

This is what I got so far on js:

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;");
    }
});
}

But somehow it doesn't seem to be working.

Answer 1

Try to use the correct syntax for .css():

$(this).children('div').css("background-color","#000000");

or:

$(this).children('div').css({"background-color":"#000000"});

instead of:

$(this).children('div').css("background-color:#000000;");

Answer 2

The :target pseudo-class is specifically designed for this sort of situation. No need to query window.location.hash using a script — the following CSS will be applied on-the-fly:

:target > .inner {
    background-color: #000000;
}

If you must use jQuery for compatibility with old browsers that don't support :target in CSS, you can still use it in a jQuery selector if you're using version 1.9 or later (see here for more details). Note that, as mentioned, the problem lies in your .css() argument so you need to fix that:

$(':target > .inner').css("background-color", "#000000");

Again, no need to query window.location.hash here, unless you need to use the hash fragment for other purposes. The entire if block can be replaced with this single statement.

Answer 3

Here you are making mistake of assign css properties via Jquery, you need to assign properties using key , value in .css()

Try to debug what value you getting for hash first

if(window.location.hash) {
var hash = window.location.hash.substring(1),
    boxes = [];

$('.blog-item-holder').find('.inner').each(function(){
    if ($(this).parent().attr('id') == hash) {
        $(this).css("background-color","#000000");
    }
});
}

Answer 4

This must work :)

$(window).on('hashchange',function(){
  var _child = $(location.hash).children('.inner');
  _child.css('backgroundColor', '#000');
})