如果 URL 有哈希，则更改 CSS答案

【问题标题】：Change CSS if URL has hash如果 URL 有哈希，则更改 CSS
【发布时间】：2013-04-29 16:30:36
【问题描述】：

当 URL 中包含哈希时，我正在尝试更改元素的 CSS。
网址看起来像

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

但它不起作用。

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

【问题讨论】：

你应该逐步调试这个：首先，检查var loc是否真的包含你想要的URL，然后检查正则表达式是否真的有效......顺便说一句.test方法看起来很奇怪
等一下！！！！！！你到底想做什么？ # 是否会真正针对具有 id 的特定元素，例如，<li id="item-itemID">？

标签： jquery css hash

【解决方案1】：

if (window.location.hash.split('-')[0] == '#item') {
    $('ul.side').addClass('hashed');
}

【讨论】：

没有错误，但也没有效果。尝试在和页脚中加载脚本。
将 $('ul.side').addClass('hashed'); 替换为 console.log("found"); 输出找到到控制台。所以第一行有效，哈希被正确检测到，但由于某种原因没有添加类......
我的错。以无冲突模式加载 jQuery，因此出现语法错误。感谢您的回答，@6ahodir！

【解决方案2】：

纯 CSS 解决方案 (demo)

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

这甚至适用于 IE7 ;)

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

【讨论】：

OP 正在寻找当前文档的 URL，而不是链接的 href。
我想我不明白这个问题。我认为.side a[href*="#"] {...} 正是我们所需要的。明白了。
谢谢，但这不是我的想法。法布里西奥是对的。

【解决方案3】：

$(function () {
    var loc = (window.location.hash).split("-");

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

编辑：更改响应功能

感谢您查看。提交隔离测试时，我没有您在 cmets 中描述的错误。我确实看到了可能是响应能力问题的不一致之处。您的代码 sn-p 不查找哈希更改，因此我对其进行了调整以在页面加载时查找哈希，并在动态更改时触发：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 中有一个哈希并突出显示地址栏并按 Enter 时，页面不会刷新。我搜索了一个答案，但我找不到任何东西。对此感到困惑，我开始了自己的问题：Page refresh from address bar with #hash

【讨论】：

控制台只抛出错误：Uncaught TypeError: Property '$' of object [object Object] is not a function (anonymous function)
@PauloFino - 我在答案中添加了一些信息。我没有看到你提到的错误。该脚本在 jQuery 下运行。

【解决方案4】：

这种方式使用 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.        

     ';

     }

?>

【讨论】：