Javascript 动态更改链接上的，无需重新加载任何内容

TL；博士

当一个链接被点击，但页面内容并没有通过CSS显示/隐藏而重新加载时，改变页面标签的最佳方式是什么？一些JavaScript，我想是吧

在这一页上，我有两种方法来查看个别杂志。点击右边的杂志封面完全重新加载带有查询字符串的页面，例如添加到URL的？mag=1，我们将标签设置为更改，但这是我们通过PHP添加的附加功能。该框架最初更改内容的方法只是通过CSS基本JavaScript更改显示/隐藏的内容，通过单击左侧选项卡添加和删除活动类

但是，我也希望在单击这些左侧选项卡时更改页面标题。选项卡的HTML代码如下所示：

<ul class="tab-nav three columns">
    <li class="active" ><a href="#" class="skip" gumby-goto="#top_of_page" gumby-offset="-60">Electric &amp; Hybrid Marine</a></li>
    <li><a href="#" class="skip" gumby-goto="#top_of_page" gumby-offset="-60">Marine Catering</a></li>
    <li><a href="#" class="skip" gumby-goto="#top_of_page" gumby-offset="-60">Marine Maintenance</a></li>
    <li><a href="#" class="skip" gumby-goto="#top_of_page" gumby-offset="-60">Shipping Port</a></li>
    <li><a href="#" class="skip" gumby-goto="#top_of_page" gumby-offset="-60">ALL TITLES</a></li>
</ul>

$title是在页面加载时设置的PHP变量

第二次编辑@MGA

我的链接现在看起来是这样的：

<a href="#" onclick="changetitle()" class="skip" gumby-goto="#top_of_page" gumby-offset="-60">

此脚本位于页面底部时：

<script type="text/javascript">
    function changetitle() {
        document.title = "<?=$title?> | UKIP Media &amp; Events";
    }
</script>

但还是什么都没发生？

函数更改值 { document.title=值； }

在链接的onClick方法上调用此方法，并传递值new title

---

并将此方法保存在您的JS脚本文件或HTML上的write in script标记中。如果我在您的站点上运行此方法，效果会如预期一样，我认为：

$('.tab-nav a').each(function() {
    $(this).on('click', function() {
        document.title = $(this).text() + ' | UKIP Media & Events';
    });
});

您可以将其放在通用JS代码的DocumentReady块中。 当然，这有点老套

结合您的方法，链接将是：

<a href="#" onclick="changetitle($(this).text());" ...>

以及changetitle功能：

<script type="text/javascript">
    function changetitle(title) {
        document.title = title + " | UKIP Media & Events";
    }
</script>

---

下面是通过JavaScript更改标题的方法：我看了这个问题，但不幸的是，它转而讨论了这种方法如何不利于SEO，因此似乎从未给出完整的答案。我知道我应该使用document.title，但是：在哪里？怎样什么时候？在您的情况下，最好的方法是使用文档就绪事件jQuery。然后您可以读取mag参数，然后使用document.Title=更改标题。我是您的标题。谢谢您的回答。请你看一下我的第二次编辑，让我知道你的方法哪里出了问题？试试看，如果这样行吗？函数changetitle{document.title=ABC；}很遗憾，不是。如果您正在使用表单或iFrame，请尝试使用parent.document.title=Value

<a href="#" onclick="changetitle($(this).text());" ...>

<script type="text/javascript">
    function changetitle(title) {
        document.title = title + " | UKIP Media & Events";
    }
</script>