Cet article présente principalement la méthode détaillée d'utilisation du hachage JS pour créer une application Web d'une seule page. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
<.>Avant-propos
Cet article vous présente principalement le contenu pertinent sur l'utilisation du hachage JS pour créer des applications Web d'une seule page. Il est partagé pour votre référence et votre apprentissage. Je n'en dis pas beaucoup plus ci-dessous, rassemblons-nous. Jetons un coup d'œil à l'introduction détaillée.1. Qu'est-ce que le hachage
Le hachage dont nous parlons ici (également appelé hachage) fait référence au hachage de l'objet de localisation dans Propriété JS, qui renvoie zéro ou plusieurs caractères suivis de # dans l'URL. Habituellement, nous pouvons obtenir la valeur de hachage ou définir la valeur de hachage via location.hash. Bien sûr, nous pouvons également définir la valeur de hachage en définissant l'attribut href de la balise a. Lorsque l'utilisateur clique sur la balise a, la valeur de hachage de la page peut être modifiée.Par exemple :
/** JS方式 **/ location.hash = 'hash'; //设置hash,该代码执行后URL后面增加“#hash”字符串 console.log(location.hash); //获取hash
/** HTML方式 **/ <a href="#hash" rel="external nofollow" >点击改变hash</a> <!-- 点击后URL后面增加“#hash”字符串 -->
2. À quoi sert le hachage
1. Définir le lien d'ancrage
Par la définition de liens d'ancrage (c'est-à-dire la méthode HTML mentionnée ci-dessus) peut faire glisser la page vers la position spécifiée en fonction de l'ID de l'élément après avoir cliqué sur le lien, même après le saut de page.2. Mettre en œuvre la production d'applications d'une seule page
Les éléments correspondants peuvent être affichés ou masqués en fonction des changements dans les valeurs de hachage, réalisant ainsi une commutation d'une seule page sans rafraîchissement de la page.3. Qu'est-ce qu'une application Web à page unique
Une application Web à page unique (SPA) est une application Web à page unique A. L'application de page est une application Web qui charge une seule page HTML et met à jour dynamiquement cette page lorsque l'utilisateur interagit avec l'application.4. Comment utiliser le hachage pour créer un SPA
Pour faire simple, affichez uniquement la première page, puis modifiez le hachage valeur. Basculez pour afficher différentes pages et masquer la page précédente.Écrivez une démo simple ici :
1. Écrivez d'abord la structure HTML
<article class="container"> <section id="page1" class="page cur">第一页</section> <section id="page2" class="page">第二页</section> <section id="page3" class="page">第三页</section> </article> <nav id="nav" class="bottom-nav"> <ul> <li>第一页</li> <li>第二页</li> <li>第三页</li> </ul> </nav>
2. Ensuite, définissez le style CSS
.page{ display: none; /* 其他样式省略 */} .page.cur{ display: block;} /* 其他样式省略 */
3. Écrivez du Javascript pour obtenir un changement de page unique .
window.onload = function () { var nav = document.getElementById('nav'); var navLi = nav.getElementsByTagName('li'); for(var i = 0,len = navLi.length; i < len; i++){ (function (i) { navLi[i].onclick = function () { //点击nav中的li,改变hash值 location.hash = 'page' + (i+1); } })(i); } location.hash = 'page1'; //每次页面重新加载时都回到page1 window.onhashchange = function (e) { //当hash变化时,执行hashchange事件,该事件具有oldURL和newURL两个事件属性,分别代表前一个URL和目前的URL var oldHash = e.oldURL.split('#')[1]; //取得前一个hash var newHash = e.newURL.split('#')[1]; //取得当前hash var oldPage = document.getElementById(oldHash); var newPage = document.getElementById(newHash); oldPage.classList.remove('cur'); //隐藏前一个page newPage.classList.add('cur'); //显示当前page }; }
/**** 前面代码省略 ****/ location.hash = 'page1'; var oldHash = location.hash; window.onhashchange = function (e) { var newHash = location.hash; var oldPage = document.querySelector(oldHash); var newPage = document.querySelector(newHash); oldPage.classList.remove('cur'); newPage.classList.add('cur'); oldHash = newHash; };
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!