Question

TL; DR

单击链接但页面内容未重新加载（仅通过CSS显示/隐藏）时，更改页面<title>标记的最佳方法是什么？有些JavaScript，我会假设？

在此页面上{http://www.ukipme.com/pub-marine.php）我有两种查看单个杂志的方法。单击右侧的杂志封面完全重新加载页面，并在页面上附加一个查询字符串（例如?mag=1），然后我们将<title>标记设置为更改，但这是附加功能我们通过PHP添加。框架改变内容的原始方法只是通过单击左侧选项卡，通过CSS（基本JavaScript添加和删除active类）来更改显示/隐藏内容。

但是，我想在单击这些左侧标签时更改页面标题。选项卡的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>

对于他们的内容：

<div class="tab-content nine columns">
    <div class="row">
        <div class="twelve columns">
            <a href="?mag=1"><img src="../img/covers/evm.jpg" alt="Electric &amp; Hybrid Marine" style="margin: 0 10px 10px 0;" /></a>
            <a href="?mag=2"><img src="../img/covers/mci.jpg" alt="Marine Catering" style="margin: 0 10px 10px 0;" /></a>
            <a href="?mag=3"><img src="../img/covers/mmi.jpg" alt="Marine Maintenance" style="margin: 0 10px 10px 0;" /></a>
            <a href="?mag=4"><img src="../img/covers/spi.jpg" alt="Shipping Port" style="margin: 0 10px 10px 0;" /></a>
        </div>
    </div>
</div>

我尝试过调查，我认为需要在DOM中发生一些事情，但遗憾的是我的JavaScript知识几乎完全不存在。有人可以帮忙吗？

修改

我已尝试将<a>标记更改为以下内容，但这似乎没有做任何事情：

<a onclick="window.document.title='<?=$title?> | UKIP Media &amp; Events'" href="#" class="skip" gumby-goto="#top_of_page" gumby-offset="-60"></a>

（$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>

但仍然没有发生任何事情？

Answer 1

功能变更标题（价值） { document.title = value; }

在链接的onClick（）方法上调用此方法，并传递值（新标题）并将此方法保存在JS脚本文件中或写入HTML上的脚本标记

Answer 2

如果我在您的网站上运行此功能，效果符合要求，我认为：

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

你可以把它放在你的通用JS代码的文档就绪块中。这是有点hacky。

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

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

和changetitle功能：

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

动态更改链接点击上的<title>，而不重新加载任何内容</title>

2 个答案: