Question

我还是javaScript / jQuery的新手，所以如果这看起来很简单，我很抱歉。

我知道我可以更改网址onClick的哈希值，但是我可以从一个元素中添加addClass / removeClass，隐藏/显示一个元素，fadeIn / fadeOut一个基于url中哈希的元素吗？

我正在尝试创建一个包含所有内容的网站（主页，关于，图片库等），然后隐藏一些内容并在onClick或onHover上显示其他内容。但我还想保留一个可以带你到网站上特定位置的网址的功能，那么有没有办法使用javaScript或jQuery根据网址的哈希触发事件？

如果hash = #gallery，则显示图库元素。

Answer 1

如果页面实际重新加载（默认链接行为），只需确保运行jquery脚本来检查hashvalue。

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

如果页面没有重新加载，只需输入$（'a'）。click（）;响应hashvalue的函数，如下例所示：

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

Answer 2

我使用您提供的第一个代码字符串，然后使用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...
}
});

Answer 3

如果你需要检查所有改变哈希的链接，那么

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

每次点击一个以#

开头的链接时，都会触发此操作

jQuery基于url的Hash触发事件

3 个答案: