3

我对 javaScript/jQuery 还是很陌生,所以如果这看起来很初级,我很抱歉。

我知道我可以更改 url onClick 的哈希值,但是我可以根据 url 中的哈希值从元素中添加类/删除类、隐藏/显示元素、淡入/淡出元素吗?

我正在尝试在一个页面(主页、关于、图片库等)上创建一个包含所有内容的网站,然后只隐藏一些内容并在点击或 onHover 上显示其他内容。但我也想保留一个 url 的功能,它可以把你带到网站上的特定位置,那么有没有办法使用 javaScript 或 jQuery 来触发基于 url 的哈希的事件?

就像如果 hash = #gallery,然后显示画廊元素。

4

3 回答 3

8

如果页面实际重新加载(默认链接行为),只需确保运行 jquery 脚本来检查哈希值。

var currentValue = window.location.hash.substr(1);
$(document).ready(function() {
  //Page loaded..
  alert('Do something with the current value');
});

如果页面没有重新加载,只需创建一个 $('a').click(); 响应哈希值的函数,如下例所示:

$(document).ready(function() {
    $('a').click(function() {
      var value = $(this).prop('href').substr(1); //remove hash using substr(1)
      alert('do something else with the '+value+' value!');
      return false; //stop default link behaviour
    });
});
于 2013-01-07T03:52:12.500 回答
1

我最终使用了您提供的第一个代码字符串,然后使用了不同 # 值的 if/else 语句。

javaScript/jQuery
var currentValue = window.location.hash.substr(1)
$(document).ready(function() {
  if(currentValue == "Home") {
    $("#about").addClass("boxshadow");
    $("#info_about").addClass("down");
    $("#info_contact").addClass("up");
    $("#info_pricing").addClass("up");
    etc...
}

else if(currentValue == "Gallery") {    
    $("#door").click();
    $("#about").click();
}


else {
    $("#about").addClass("boxshadow");
    $("#info_about").addClass("down");
    $("#info_contact").addClass("up");
    $("#info_pricing").addClass("up");
    etc...
}
});
于 2013-01-07T22:19:22.443 回答
0

如果您需要检查所有更改哈希的链接,那么

$("a[href^=#]").on("click",function(){
     alert("clicked something with hash");
});

每次单击以开头的链接时都会触发#

于 2014-05-20T15:30:39.390 回答