Question

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

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

我试图使用window.location在页面加载时获取URL，然后将其传递给我的函数；但是，这没有用。我还短暂地尝试过使用cookie来保存页面位置，但是无法做到这一点。

如何获取基于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属性，该属性标识页面/ div，并将其设置为window.location.hash的值。

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

然后创建函数，该函数将显示/隐藏所需的页面，并在加载整个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>

Answer 2

在body标签上使用onload属性：

<body onload="pageLoaded(window.location.hash)">

https://www.w3schools.com/jsref/event_onload.asp

Javascript和HTML；从URL获取页面

2 个答案: