4

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

但它不起作用。

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

4

4 回答 4

3 
if (window.location.hash.split('-')[0] == '#item') {
    $('ul.side').addClass('hashed');
}
于 2013-05-05T22:55:20.990 回答
2

一个纯 CSS 解决方案（演示）

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

这甚至适用于 IE7 ;)

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

于 2013-05-06T02:13:56.003 回答
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 中有一个哈希并突出显示地址栏并按 Enter 时，页面不会刷新。我搜索了一个答案，但我找不到任何东西。对此感到困惑，我开始了自己的问题：使用#hash从地址栏刷新页面

于 2013-05-05T23:01:00.853 回答
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.        

     ';

     }

?>
于 2014-02-14T13:00:24.563 回答