如何使用(location.hash）和(.trigger）进行导航

how to use (location.hash) and (.trigger) to navigate?

本文关键字：导航 trigger location hash 何使用      更新时间：2023-09-26

我有 5 个 （div） 全部隐藏，我使用 .click 函数隐藏其中的 4 个并显示 1..（每个按钮 1 个）例如：该网页 ：

<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 更改为>主页#Div2我使用了location.hash和.trigger。因此，当用户在URL中输入home#div2时，jquery激活了b1.click

if(location.hash == "#div2"){
    $("#b1").trigger("click");
}

从逻辑上讲，它应该隐藏div1 并显示div2但即使我手动单击 B1 或 B2，它也不会显示任何内容。

我做错了什么？！

看起来您的问题是由您的div标签未正确终止引起的。我将它们更改为：（请注意标记终止符中的正斜杠。

    <div id="div1">hi</div>
    <div id="div2">hello</div>

这个完整的示例在 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>
相关文章：