Question

我已经创建了一个函数来获取网页的路径名，如果它与菜单项的id匹配，那么它会将一个css属性添加到div标签，将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索引和类html的元素”。你不需要在你的id中使用一个点来工作，或者逃避点。

或者，您可以执行属性选择器，例如：

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

整体工作要少得多

Answer 2

问题在于.中的id。你需要转义这个，以便jQuery将它作为ID读取，而不是ID，后跟一个类选择器：

id = "#index\\.html"

为此您可以使用：

var id = "#" + pathname.replace('.', '\\\.');

如果我们在您网页上的JavaScript控制台中对此进行测试，我们会得到以下结果：

Working Example

Answer 3

问题似乎与您正在使用的ID（例如＃index.html和＃cleaning.html）一起选择正确的DOM元素。这是不正确的，您应该只使用#index和#cleaning，因为这些是有效的ID（在ID中使用。是非法的HTML / XHTML）。

解决这个问题的一种方法是将id分割为这样，这样你就可以使用html文件名，而不是包含文件扩展名：

 var path = window.location.pathname;
        if(path === "/")
            {
            var pathname = path.replace("/","index.html");
            }
        else
            {
            pathname = path.replace("/","");
            }

        pathname = pathname.split(".");
        var id = "#" + pathname[0];

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

现在您将使用#index而不是#index.html，因为文件扩展名现已被删除。我添加的代码是：

pathname = pathname.split(".");
var id = "#" + pathname[0];

来源：http://www.w3schools.com/jsref/jsref_split.asp

.css jquery属性没有将css应用于div标签

3 个答案: