为什么从其他网络返回会保留最后一个哈希值，同时显示第一个哈希值的内容

Why does returning from other web leave the last hash while showing the content of the first one?

本文关键字：哈希值 显示 第一个 为什么 网络 其他 返回 最后一个 保留      更新时间：2023-09-26

问题：在我输入名称并按回车键后，哈希更改为"pag2"，显示不同的内容。我单击转到其他网站的红色链接，一旦我进入该网站，我就会通过浏览器中的后退按钮返回。它仍然是www.luisalmerich.com#pag2，但显示来自空位置哈希(您看到直接输入的内容(中的内容。

如果我解释得不好：

www.luisalmerich.com -> 我输入文本并按回车键 ->www.luisalmerich.com/#pag2-> www.siroppe.com (#pag2 上的红色链接(-浏览器上的>后退按钮 ->www.luisalmerich.com/#pag2 但包含来自 www.luisalmerich.com 的内容

这是网络： http://www.luisalmerich.com/

我的代码并不奇怪。以下是该网站拥有的所有JavaScript(它可能导致问题(：

$(document).ready(function () {
    $('#input1').keypress(function (e) {
       if(e.which == 13){
           location.hash="pag2";
       }
    });
});
$(window).on('hashchange', function() {
    if (location.hash == "#pag2") {
        $('#pag1').css("display", "none");
        $('#pag2').css("display", "block");
        $('#pag3').css("display", "none");
    } else if (location.hash == "#pag3") {
        $('#pag1').css("display", "none");
        $('#pag2').css("display", "none");
        $('#pag3').css("display", "block");     
    } else {
        $('#pag1').css("display", "block");
        $('#pag2').css("display", "none");
        $('#pag3').css("display", "none");
    }
});

这是重要的html

<ul id="lista">
    <li id="pag1">
        <label id="label1" for="input1">
            Hola, soy Luis.<br/>
            Bienvenido a mi web personal.<br/>
            Antes de nada,<br/>
            ¿podrías indicarme tu nombre?<br/>
        </label>
        <input type='text' id="input1" autofocus autocomplete='off'/>
    </li>
    <li id="pag2">
        <label id="label2">
            <span id='nombre'>Buenos días X.</span>
            Me llamo Luis Almerich de Haro. Además de trabajar como creativo en la agencia <a href='http://siroppe.com/'>Siroppe</a>, estudio Publicidad y Relaciones Públicas en la universidad CEU de Valencia.</br>
            Nací hace 21 años en un pequeño pueblo de la costa gaditana y, desde que era un niño, me ha fascinado el mundo de la publicidad. También tengo otras pasiones como la tecnología, música, lectura, deporte y arte.</br>
            Me defino como una persona muy curiosa. Me encanta aprender cosas nuevas y, al igual que esta web, soy un lienzo en blanco en el que queda mucho por completar.</br>
            ¿Te interesaría saber algo más sobre mí?</br>
        </label>
    </li>
    <li id="pag3">
        <label id="label3">Voy a hablar un poco sobre mis cualidades. Tengo una actitud positiva hacia cualquier trabajo y gran facilidad para comunicarme y relacionarme con mis compañeros. Confianza en el trabajo, adaptabilidad dentro del entorno laboral y en el trabajo en equipo, auto-motivación y pasión en el entorno laboral.</br>También he participado en diversos voluntariados:<ul><li>Organización del festival de publicidad la Lluna 2014, a cargo de CSG Servicios.</li><li>Organización del cóctel de navidad del Colegio Publicitario 2014.</li><li>Miembro activo del Observatorio Beyond The Line desde Septiembre del 2014.</li><li>Colaborador de la marca Maru Cruz.</li></ul></br>Di mi gran paso al mundo laboral trabajando para <a href='http://www.estudihac.com/'>Estudi{H}ac</a> como New Business and Research.</p><p>Soy proactivo, me gusta participar en concursos, eventos y actividades. Durante el curso 2014/2015 participé en el concurso anual de publicidad Naranja Below, donde obtuve el segundo puesto. También participé en NASA Space Apps Challenge 2015, donde obtuve una mención especial por la mejor presentación y manera de vender un proyecto.</label>
    </li>
</ul>

由于这个问题，现在我没有使用 pag3。另外，我知道ASCII问题，我会尽快修复它们:)

如您所见，没什么特别的。我做错了什么？我只想显示 pag2 的内容，即使用户从其他网络返回。

当您从另一个站点返回时，$(window).on('hashchange'事件实际上并未触发。哈希值从一开始就在那里。

您需要检查 document.ready 中的哈希：

 $( document ).ready(function() {
      if(window.location.hash) {
        // Fragment exists, do your staff to use it
      }
 );
相关文章：