2

我创建了一个函数来获取网页的路径名，如果它与菜单项的 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。谢谢

4

3 回答 3

3

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

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

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

总体而言，这会少很多工作

于 2013-11-04T23:07:24.347 回答
2

问题在于.您的id. 您需要将其转义，以便 jQuery 将其读取为 ID 而不是 ID 后跟 Class 选择器：

id = "#index\\.html"

为此，您可以使用：

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

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

工作示例

于 2013-11-04T23:09:03.077 回答
1

问题似乎出在您使用的 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

于 2013-11-04T23:13:34.813 回答