当 url 哈希与 div 的 id 匹配时，对 div 的子级执行某些操作

Question

假设我有如下html:

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

所以我的url的到达将被重置为这样:

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

所有我想要的是当人们去到页面(例如:example.com/page/#BBBB)，然后div#BBBB .inner将有一个黑色的背景，和相同的处理url有CCCC, DDDD等。

这是我目前得到的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;");
    }
});
}

Answer 1

尝试使用正确的语法.css():

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

或:

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

代替:

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

Answer 2

:target伪类是专门为这种情况设计的。不需要使用脚本查询window.location.hash -以下CSS将被动态应用:

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

如果你必须使用jQuery来兼容不支持CSS中:target的旧浏览器，如果你使用1.9或更高版本，你仍然可以在jQuery选择器中使用它(更多细节见这里)。请注意，如前所述，问题在于您的.css()参数，因此您需要修复该问题:

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

同样，这里不需要查询window.location.hash，除非您需要将哈希片段用于其他目的。整个if块可以用这条语句替换。

Answer 3

这里你犯了通过Jquery分配css属性的错误，你需要在。css()中使用key, value来分配属性

试着先调试你得到的哈希值

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

这必须有效:)

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