如何使用(location.hash)和(.trigger)进行导航? [英] how to use (location.hash) and (.trigger) to navigate?
问题描述
我有5个(div)全部隐藏，并且我使用.click函数隐藏了其中的4个并显示1 ..(每个按钮1个) 例如 : html:
i have 5 (div)s all hidden and i use .click function to hide 4 of them and show 1..(1 for each button) for example : the html :
<div id="div1">hi<div>
<div id="div2">hello<div>
jquery:
$("#b1").click(function(){
$("#div1").hide(500);
$("#div2").show(500);
});
$("#b2").click(function(){
$("#div2").hide(500);
$("#div1").show(500);
});
当我单击b2时，URL更改为> home#div2 我用过location.hash和.trigger 因此，当用户在网址中输入home#div2时，jQuery会激活b1.click
when i click the b2 the url change to > home#div2 i used location.hash and .trigger so when the user enter home#div2 in the url the jquery active the b1.click
if(location.hash == "#div2"){
$("#b1").trigger("click");
}
从逻辑上讲，它应该隐藏div1并显示div2 但是即使我手动单击b1或b2也没有任何显示.
logicly it should hide div1 and show div2 but it shows nothing even when i click b1 or b2 manually..
我做错了什么?！
推荐答案
您的问题似乎是由于div标记未正确终止引起的.我将它们更改为:(请注意标签终止符中的正斜杠.)
It looks like your problem was caused by your div tags not being terminated correctly. I changed them to: (Notice the forward slash in the tag terminator.)
<div id="div1">hi</div>
<div id="div2">hello</div>
此完整示例适用于Chrome:
This complete example works for me in Chrome:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="Javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#b1").click(function(){
$("#div1").hide(500);
$("#div2").show(500);
});
$("#b2").click(function(){
$("#div2").hide(500);
$("#div1").show(500);
});
if(window.location.hash == "#div2"){
$("#b1").trigger("click");
}
else if(window.location.hash == "#div1"){
$("#b2").trigger("click");
}
alert(window.location.hash);
});
</script>
</head>
<body>
<input type="button" id="b1" value="b1"></input>
<input type="button" id="b2" value="b2"></input>
<div id="div1">hi</div>
<div id="div2">hello</div>
</body>
</html>
这篇关于如何使用(location.hash)和(.trigger)进行导航?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
