我正在使用Javascript来显示文档。首先,我隐藏已加载的内容。然后,如果用户按下按钮,与该按钮相关的文本将变为可见,同时隐藏其他文本。
目前,我的技术不会更改在地址栏中显示的URL。
我希望在用户单击其中一个内容显示按钮时更新地址栏。例如:
address.com/value_of_button
如果用户输入:
adress.com/a_value
我想改变与值相关联的div
的显示方式。如何实现?
我正在使用Javascript来显示文档。首先,我隐藏已加载的内容。然后,如果用户按下按钮,与该按钮相关的文本将变为可见,同时隐藏其他文本。
目前,我的技术不会更改在地址栏中显示的URL。
我希望在用户单击其中一个内容显示按钮时更新地址栏。例如:
address.com/value_of_button
如果用户输入:
adress.com/a_value
我想改变与值相关联的div
的显示方式。如何实现?
您可以始终使用哈希 URL,并设置 URL 如下:
function setHash(var hash) {
window.location.hash = hash;
}
function getHash() {
return window.location.hash;
}
要更新页面,你可以像这样简单地使用if语句:
if(getHash() == "#main") {
document.getElementById('content').innerHtml = "<p>Main content</p>";
}
我已经在去年某个时候用jQuery演示过这一点。当然,不使用jQuery也是可能的,但我会提供我创建的演示文稿。我也会将一个示例移植到常规JavaScript。
<html>
<head>
<style type="text/css">
.content {
display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu a').each(function(){
id = $(this).attr('href');
id = id.substring(id.lastIndexOf('/'));
id = id.substring(0,id.indexOf('.'));
$(this).attr('rel',id);
});
$('#home').show();
$('#menu a').click(function(e){
e.preventDefault();
$('.content').hide();
$('#'+$(this).attr('rel')).show();
location.hash = '#!/'+$(this).attr('rel');
return false;
});
});
</script>
</head>
<body>
<div id="menu">
<a href="home.html">Home</a> -
<a href="one.html">One</a> -
<a href="two.html">Two</a> -
<a href="three.html">Three</a>
</div>
<div id="home" class="content">
Home content.
</div>
<div id="one" class="content">
One content.
</div>
<div id="two" class="content">
Two content.
</div>
<div id="three" class="content">
Three content.
</div>
</body>
</html>
编辑
承诺的DOM方法:
<html>
<head>
<style type="text/css">
.content {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var links = document.getElementById('menu').getElementsByTagName('a'),
divs = document.getElementsByTagName('div'),
sections = [],
id = '';
for (var i = 0, size = divs.length; i < size; i++) {
if (divs[i].className.indexOf('content') != -1) {
sections.push(divs[i]);
}
}
for (var i = 0, size = links.length; i < size; i++) {
id = links[i].href;
id = id.substring(id.lastIndexOf('/') + 1);
id = id.substring(0,id.indexOf('.'));
links[i].rel = id;
links[i].onclick = function(e){
e.preventDefault();
for (var p = 0, sections_size = sections.length; p < sections_size; p++) {
sections[p].style.display = 'none';
}
document.getElementById(this.rel).style.display = 'block';
location.hash = '#!/' + this.rel;
return false;
}
}
document.getElementById('home').style.display = 'block';
};
</script>
</head>
<body>
<div id="menu">
<a href="home.html">Home</a> -
<a href="one.html">One</a> -
<a href="two.html">Two</a> -
<a href="three.html">Three</a>
</div>
<div id="home" class="content">
Home content.
</div>
<div id="one" class="content">
One content.
</div>
<div id="two" class="content">
Two content.
</div>
<div id="three" class="content">
Three content.
</div>
</body>
</html>
#!
)技术曾经有一些追随者。 - Jared Farrish