JavaScript 和 Html；从 URL 获取页面

Question

我正在为客户创建一个网站，他们给了我一些非常严格的限制。 html 必须编码在一个文档 (index.html) 中，而 javascript 和 css 则分别位于各自单独的文档中。他们还希望我仅在必要时才使用 Angular 或 Node(到目前为止还没有必要)。

由于他们需要网站上有多个“页面”，我使用 Javascript 来隐藏或取消隐藏与每个页面对应的不同 div。我也有内部引用的单独的 div。因此，本地图“页面”打开时，URL 显示为 https:\\site.com\#maps 。当页面重新加载时，它会忽略#maps并简单地返回到主“页面”。

我尝试使用 window.location 在页面加载时获取 url，然后将其传递给我的函数；然而，这并没有奏效。我还短暂地尝试过用 cookies 来保存页面位置，但没能取得多大进展。

如何获得根据url加载我想要的页面的函数？

function openPage(evt, PageName) {
// Declare all variables
var i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(PageName).style.display = "block";
evt.currentTarget.className += " active";

//set the page cookie
var expiry = new Date();
expiry.setTime(expiry.getTime()+600000);
expires = "; expires=" + expiry.toUTCString();
document.cookie = "Page=" + PageName + expires + " ; path=/";
}

Answer 1

嗯，每个 div 元素都必须具有 id 属性，该属性标识 page/div 并将被设置为 window.location 的值.hash.

然后处理触发页面更改的所有点击事件，例如将 href 属性设置为这些 id 的所有 a 元素。

然后创建显示/隐藏所需页面的函数，并在加载整个 html 页面时调用此方法。

这是一个使用 jQuery 的示例(如果您想要不需要使用 jQuery，您也可以使用普通的 javascript 来完成):

$(function() {
	// Method wich show/hide pages
	function showpage(target) {
		// Target is the id of the page div
		var $target = $(target);
		
		// If there is not any page with that id do nothing
		if(!$target.length) {
			return;
		}
	
		// Hide all pages
		$(".page").css("display", "none");
		
		// Show the target page
		$target.css("display", "block");
		
		// Update the window has
		window.location.hash = target;
	}

	// Handle clicks which show pages
	$(document).on("click", "a[href^='#']", function (e) {
		e.preventDefault();
		showpage($(this).attr("href"));
	});

	showpage(window.location.hash);
});

.page {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#page1">page1</a>
  </li>
  <li>
    <a href="#page2">page2</a>
  </li>
  <li>
    <a href="#page3">page3</a>
  </li>
  <li>
    <a href="#page4">page4</a>
  </li>
</ul>

<div id="page1" class="page">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum velit pretium porttitor aliquam. Proin a lectus nec ligula laoreet tempor. In ornare volutpat velit, non semper mauris accumsan nec. Aliquam nibh nisi, pellentesque eu mauris eu, fringilla faucibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium, tortor eget scelerisque luctus, enim quam elementum diam, ac varius elit tortor eu tortor. Morbi molestie massa nec aliquam fringilla. 
</div>
<div id="page2" class="page">
Maecenas sagittis convallis turpis, sed fermentum magna porttitor eget. Aenean et lectus eu velit interdum aliquet. Duis faucibus sollicitudin iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit pulvinar felis, at fermentum dolor ultrices non. Maecenas malesuada urna lorem, mollis lobortis nisi semper et. Quisque ac tellus interdum, hendrerit nisl eu, feugiat ante. Nullam tincidunt ex non metus venenatis suscipit. Duis rutrum convallis erat, quis ultrices nunc efficitur sed. Donec lacinia tellus eu neque tempus, eu bibendum odio sollicitudin. Nullam convallis ligula vitae sapien tristique, eget ullamcorper risus pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tincidunt, sapien vel eleifend laoreet, tortor dolor ultrices est, consequat suscipit neque metus a velit. Maecenas cursus nec arcu et varius. Nulla ex lorem, mollis eu risus quis, molestie dapibus nisl. Maecenas vel imperdiet mauris, ut pretium odio. 
</div>
<div id="page3" class="page">
Donec mi mi, placerat tincidunt justo sit amet, facilisis congue sapien. Nunc lacinia lobortis turpis ac rhoncus. Donec tempus elit vitae pharetra congue. Nam at dolor at metus hendrerit pharetra nec et velit. Morbi iaculis ipsum non finibus hendrerit. Nunc eget ex non augue feugiat venenatis a sit amet nisl. Vestibulum elementum ipsum non enim pulvinar malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et purus vitae libero lobortis gravida et eu lectus. Aenean dignissim molestie ante a iaculis. 
</div>
<div id="page4" class="page">
Pellentesque iaculis diam a condimentum aliquam. Integer vestibulum interdum ligula, quis tempus felis aliquam at. Ut vel tincidunt purus, quis convallis ipsum. Pellentesque massa velit, varius gravida purus nec, consectetur suscipit nibh. Vivamus vel dui sit amet magna condimentum sodales ac a urna. Sed viverra, dolor sit amet facilisis commodo, tortor massa efficitur neque, sit amet sollicitudin lectus augue sed est. Nulla dapibus facilisis magna, vestibulum maximus dui gravida convallis. Sed sit amet tellus non velit tincidunt mollis vitae vitae purus. Donec sed molestie lacus. Morbi condimentum sapien nec odio scelerisque bibendum. 
</div>