Question

当URL中有哈希值时，我正在尝试更改元素的CSS URL看起来像

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

网址中唯一的静态部分是 #item - 位。某物和 itemID 位会发生变化。因此，只要网址中有 #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');
  }
});

但它不起作用。

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

Answer 1

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

Answer 2

纯CSS解决方案（demo）

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

这甚至适用于IE7;）

这只是选择器，你放在那里的CSS属性是什么值.hashed已经有了。

Answer 3

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

有一些奇怪的行为。当您在网址中有哈希并突出显示地址栏并按Enter键时，页面不会刷新。我找了一个答案，但我找不到任何东西。对此感到困惑，我开始提出自己的问题：Page refresh from address bar with #hash

Answer 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.        

     ';

     }

?>

如果URL有哈希，则更改CSS

4 个答案: