zoukankan      html  css  js  c++  java
  • 模拟单页面应用程序(SPA)

    a标签的锚点值是用来实现:页面内部跳转

    • 1 ajax
    • 2 哈希值(锚点)的使用(window.location.hash #)
    • 3 hashchange 事件
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		div {
    			height: 500px;
    			 100%;
    			background-color: hotpink;
    		}
    	</style>
    </head>
    
    <body>
    	<ul>
    		<li>
    			<a href="#/find">发现音乐</a>
    		</li>
    		<li>
    			<a href="#/my">我的音乐</a>
    		</li>
    		<li>
    			<a href="#/friend">朋友</a>
    		</li>
    	</ul>
    
    	<div id="content">
    		<!-- 这是内容区域 -->
    	</div>
    
    	<script src="./node_modules/axios/dist/axios.js"></script>
    	<script type="text/javascript">
    		// 进入页面,就触发这个函数来获取当前哈希值对应的内容
    		handlerChange()
    
    		window.addEventListener('hashchange', handlerChange)
    
    		function handlerChange() {
    			// console.log('哈希值改变了', location.hash)
    			switch (location.hash) {
    				case '#/friend':
    					axios.get('./friend.json').then(res => {
    						console.log(res)
    						document.getElementById('content').innerHTML = `<h1>${res.data.content}</h1><p>${res.data.name}</p>`
    					})
    					break;
    
    				case '#/my':
    					axios.get('./my.json').then(res => {
    						console.log(res)
    						document.getElementById('content').innerHTML = `<h1>${res.data.content}</h1><p>${res.data.name}</p>`
    					})
    					break;
    
    				case '#/find':
    					axios.get('./find.json').then(res => {
    						console.log(res)
    						document.getElementById('content').innerHTML = `<h1>${res.data.content}</h1><p>${res.data.name}</p>`
    					})
    					break;
    			}
    		}
    	</script>
    </body>
    
    </html>
    
  • 相关阅读:
    23种设计模式彩图
    Win10间歇性卡顿
    RDMA
    mii-tool与ethtool的用法详解
    linux下模拟CPU占用100%小程序
    Linux SNMP 监控一些常用OID
    SNMP协议介绍
    set排序(个人模版)
    TSP(个人模版)
    树的重心(个人模版)
  • 原文地址:https://www.cnblogs.com/mushitianya/p/10529119.html
Copyright © 2011-2022 走看看