我有 3 个 html 文档:header.html、blackPage.html 和 greenPage.html。 header.html 对 blackPage.html 和 greenPage.html 都是通用的。我想使用名为 HeaderScript.js 的脚本，使页眉中用于更改页面的按钮反射(reflect)当前页面的颜色。我应该怎么做呢？ (这只是一个例子:在实际应用程序中，绿色页面上没有足够的信息来确定标题应该是什么，所以我不能在加载绿色页面时更新它)。
这是我正在使用的 4 个文件:
header.html
<html>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src=HeaderScript.js></script>
<script>
$(document).ready(function(){
$("#Button").click(function(){
changePage($("#Button").get(0));
});
});
</script>
<style>
#Button {
height: 80px;
width: 80px;
background-color: black;
}
</style>
<div id="Button"></div>
</html>
blackPage.html
<html>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#Header").load("header.html");
});
</script>
<Title>Black Page</Title>
<h>Black Page</h>
<div id="Header"></div>
</html>
greenPage.html
<html>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#Header").load("header.html");
});
</script>
<Title>Green Page</Title>
<h>Green Page</h>
<div id="Header"></div>
</html>
HeaderScript.js
function changePage(div){
if (div.style.backgroundColor === "green"){
div.style.backgroundColor = "black";
alert("Color changed to black");
document.location.href = "blackPage.html";
}
else{
div.style.backgroundColor = "green";
alert("Color changed to green");
document.location.href = "greenPage.html";
}
}
最佳答案
新的header.html页面代码:
<html>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<script src="HeaderScript.js"></script>
<script>
$(document).ready(function(){
var path = window.location.pathname;
path = path.substr(path.lastIndexOf('/') + 1,
path.indexOf('Page.html') - path.lastIndexOf('/') - 1);
$("#Button").css('background-color', path);
$("#Button").click(function(){
path = (path == 'green' ? 'black' : 'green');
$("#Button").css('background-color', path);
window.location = path + 'Page.html';
});
});
</script>
<style>
#Button {
height: 80px;
width: 80px;
}
</style>
<div id="Button"></div>
</html>
希望有用 ;) 让我知道..
关于javascript - 如何加载标题，更改它，然后重定向到具有更新标题的页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23036955/