javascript - .css jquery 属性未将 css 应用于 div 标记

Question

我已经创建了一个函数来获取网页的路径名，如果它与菜单项的 ID 匹配，那么它将向 div 标记添加一个 css 属性，将 div 显示为当前页面。这是我正在测试的网站:http://kwp.host22.com .我正在使用警报来检查变量是否正确。这是我的 html。

<div id="navigation">
        <a href="index.html"><div class="navblocks" id="index.html"><p>Home</p></div></a>
        <a href="cleaning.html"><div class="navblocks" id="cleaning.html"><p>Cleaning</p></div></a>
        <a href="contact.html"><div class="navblocks" id="contact.html"><p>Contact Us</p></div></a>
    </div>

这是我的 jquery:

var path = window.location.pathname;
        if(path === "/")
            {
            var pathname = path.replace("/","index.html");
            }
        else
            {
            pathname = path.replace("/","");
            }
        alert("pathname = " + pathname);
        var id = "#" + pathname;
        alert("id = " + id);
        $('a').each(function() 
            {
            var href = $(this).attr("href");
            alert("href = " + href);
            if (href === pathname)
                {
                $(id).css('box-shadow','0px 0px 20px inset');
                }

但它没有将框阴影应用到 div 标签。

任何帮助将不胜感激，我仍在学习 jquery。谢谢

Answer 1

问题在于 jQuery 会将 id“#index.html”解释为“具有 id index 和 class html 的元素”。你不需要在你的 id 中使用点来工作，或者转义点。

或者，你可以做一个属性选择器，比如:

$("[href='"+pathname+"']").find('.navblocks').css('box-shadow','0px 0px 20px inset');

整体上会少很多工作