logo标签列表

如果URL带有哈希值，如何更改CSS

jquerycsshash
4

我试图在URL带有哈希值时更改元素的CSS样式。
URL看起来像这样

http://foo.com/base/something#item-itemID

URL中唯一不变的部分是#item-。而something和itemID这两个部分是会改变的。所以，每当一个URL中包含#item（破折号被有意省略）时，我希望进行更改。
<ul class="side">

转化为

<ul class="side hashed">

在为这种情况创建特定类之后，我设法编译了一段基于我对JS和JQuery的有限理解而编写的JS代码，将此类添加到元素中：

$(function() {
  var loc = window.location.hash;
  if(/^#item/.test(loc)) {
    $('ul.side').addClass('hashed');
  }
});

但是它没有起作用。

请帮忙。
非常感谢任何指向正确方向的建议。

1
你应该逐步调试这个问题：首先，检查 var loc 是否真的包含了你想要的 URL，然后再检查正则表达式是否真的起作用... 顺便说一句，.test 方法看起来很奇怪。 - Sliq
等一下！！！！！你真正想做什么？ # 是否实际上会针对具有特定ID的特定元素，例如<li id="item-itemID">？ - Marc Audet
4个回答
3
if (window.location.hash.split('-')[0] == '#item') {
    $('ul.side').addClass('hashed');
}
没有错误，但也没有效果。尝试在<head>和页脚中加载脚本。 - Paulo Fino
用 console.log("found"); 替换 $('ul.side').addClass('hashed'); 将 found 输出到控制台。因此，第一行有效，哈希值被正确检测，但由于某些原因未添加类... - Paulo Fino
我的错。我在无冲突模式下加载了jQuery，因此出现了语法错误。 感谢您的回答，@6ahodir！ - Paulo Fino
2

一种纯CSS的解决方案（演示）

a[href*="#"] {  
  color: purple; /* contains a hash */  
}

这甚至可以在IE7上运行 ;)

这只是选择器，你将放入其中的CSS属性是.hashed已经具有的任何值。

1
OP 正在寻找当前文档的 URL 而不是链接的 href。 - Fabrício Matté
我想我不理解这个问题。我认为 .side a[href*="#"] {...} 正是所需的。明白了。 - ArleyM
谢谢，但那不是我想要的。Fabrício 是对的。 - Paulo Fino
1
$(function () {
    var loc = (window.location.hash).split("-");

    if (loc[0] == "#item") {
        console.log("item found");
        //  $('ul.side').addClass('hashed');
    }
});

编辑：更改响应功能

感谢您查看。在进行孤立测试时，我没有遇到您在评论中描述的错误。我看到了可能会影响响应性的不一致之处。您的代码片段没有查找哈希变化，因此我对其进行了调整，以便在页面加载时查找哈希，并在动态更改时触发：http://jsfiddle.net/djwave28/hqdvC/

$(function () {
    if (window.location.hash) {
        getHash();
    }
    $(window).on("hashchange", function () {
        getHash();
    });
});

function getHash() {
    var loc = (window.location.hash).split("-");
    if (loc[0] == "#item") {
        console.log("item found");
        //  $('ul.side').addClass('hashed');
    };
}

有一些奇怪的行为。当您在url中有一个哈希并突出显示地址栏并按回车键时，页面不会刷新。我搜索了答案，但找不到任何东西。对此感到困惑，我开始了自己的问题: 从带有＃哈希的地址栏刷新页面

控制台只会抛出一个错误： Uncaught TypeError: 对象[object Object]的属性'$'不是一个函数（匿名函数） - Paulo Fino
@PauloFino - 我添加了一些信息到答案中。我没有看到你所提到的错误。脚本在jQuery下运行。 - Daniel
0

这种方法使用 PHP 检查 URL 是否包含哈希，如果是这种情况，你可以随意修改你的 CSS。

<?php

     $url = $_SERVER['REQUEST_URI'];
     $hash = '-';   
     $hashurl = strpos($url, $hash);

     if ($hashurl !== false) {

     echo '

         //add jquery to add and/or remove css class to element.        

     ';

     }

?>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接