用锚点标记点击更改页面标题
[英]Change Title Of Page With The Click Of Anchor Tag
问题描述
Using Javascript, how would I change the title of a page when a click a specific anchor tag. 
使用Javascript，如何在单击特定锚标记时更改页面标题。
<a href="index.html" title="Home">Home</a>
<a href="about.html" title="About Us">About Us</a>
Possibly something like title="" in the anchor tags. 可能类似于锚标签中的title =“”。 Also, if possible, could you have it support history, so that if the back or forward button is pushed, it would change back to what it was. 此外，如果可能的话，你是否可以拥有它支持历史记录，这样如果按下后退或前进按钮，它将变回原来的状态。
Any help or suggestions is appreciated. 任何帮助或建议表示赞赏。
Revision: I have another plugin that dynamically changes the page, so clicking the links in the above statement doesn't actually change anything in the header. 修订：我有另一个动态更改页面的插件，因此单击上述语句中的链接实际上不会更改标题中的任何内容。
3 个解决方案
解决方案1
2 2016-01-28 03:27:14
The current HTML code you provided will actually take the user to a different page upon clicking. 您提供的当前HTML代码实际上会在点击时将用户带到其他页面。 So depending on the title attribute of index.html and about.html , it may have different titles than the current page. 因此，根据index.html和about.html的title属性，它可能具有与当前页面不同的标题。
If you don't want the page to reload and add an entry into history, you could do something like this: 如果您不希望页面重新加载并在历史记录中添加条目，则可以执行以下操作：
$('a').click(function(e) {
$('title').text($(this).attr('title'));
history.pushState({}, '', $(this).attr('href'));
e.preventDefault();
});
You can learn more about the .pushState(...) API here: https://developer.mozilla.org/en-US/docs/Web/API/History_API 您可以在.pushState(...)了解有关.pushState(...) API的更多信息： https ： //developer.mozilla.org/en-US/docs/Web/API/History_API
解决方案2
1 2016-01-28 03:25:14
Check out the History.pushState() method: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState 查看History.pushState()方法： https ： //developer.mozilla.org/en-US/docs/Web/API/History/pushState
You can use it to push a new state to the browsers history like so: 您可以使用它将新状态推送到浏览器历史记录，如下所示：
var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';
var url = 'hello-world.html';
history.pushState(state, title, url);
This should change the title and url and allow you to use the browsers back and forward functionality 这应该更改标题和网址，并允许您使用浏览器的后退和转发功能
To use this without requiring any outside libraries like jQuery you could add this to the onclick of the links, for example: 要在不需要任何外部库（如jQuery）的情况下使用它，您可以将其添加到链接的onclick中，例如：
<a href="index.html" title="Home" onclick="history.pushState({}, 'Home Page Title', 'home.html')">Home</a>
解决方案3
0 2016-01-28 03:35:23
<html>
<head>
<title>sample Page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("a").click(function (e) {
e.preventDefault()
$('title').text($(this).attr('title'));
window.pushState({}, '', 'about.html');
e.preventDefault();
});
});
</script>
</head>
<body>
<a href="index.html" title="Home">Home</a>
<a href="about.html" title="About Us">About Us</a>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.