Question

我有一个静态HTML页面，我使用span标签和javascript来突出显示文本的选定部分。在单独的页面上，我想链接回此HTML页面并指定突出显示活动。 请参阅下面提供的代码。

问题是必需的 style =“background：transparent”标记。它必须在那里，以便突出显示仅在单击时激活，但这也意味着当我尝试按照下面的指定链接到此页面时，突出显示不活动。

非常感谢任何帮助。感谢。

点击此链接会突出显示文档中指定的文字部分。

<span title="Warscape"><a title="Warscape" onclick="highlightSpan(this.getAttribute('title'))" href="">Warscape</a></span>

这是点击时突出显示的文字。

<span title="Warscape" class="highlight" style="background: transparent">During this month while we have been building Fort No 1 Spring field Missouri, quite a No of Regiments have arrived from the north &amp; now the Army of the Frontier [is?] formed</span>

用于突出显示链接到页面的代码。

<a href="j_62sept.html?highlight=Warscape">

CSS re。突出

.highlight {background:#bcdbda;}

Javascript re。突出

function highlightSpan(spanTitle)
{
var spans = document.getElementsByTagName("span");
// take away color
for (var i = 0; i < spans.length; ++i)
{
    spans[i].style.backgroundColor = "transparent";
}
// add color
for (var i = 0; i < spans.length; ++i)
{
    if (spans[i].getAttribute('title') == spanTitle)
    { 
        spans[i].style.backgroundColor = "#bcdbda";       
    } 
}
}

Answer 1

我认识到这是一个旧线程，但是现在可以使用此处介绍的滚动到文本片段功能解决Chrome问题：

https://chromestatus.com/feature/4733392803332096

简而言之，它允许您提供一个链接，该链接跳到特定的文本字符串，并且（在Chrome的实现中）突出显示该部分。链接的基本版本如下所示：

https://en.wikipedia.org/wiki/Cat#:~:text=Felis%20catus

Answer 2

当您单击指向突出显示采取操作的页面的链接（<a href="j_62sept.html?highlight=Warscape">）时，您需要以某种方式读取该页面上的查询字符串值以突出显示正确的范围。你可以使用javascript。请参阅此示例：http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx

Answer 3

这是一个有趣的问题。如果你想让javascript选择url中的参数，你可以使用window.location.href参数将其拉出来。所以，非常简单的以下功能：

function CheckForHighlight(){
    href = window.location.href;
    values = href.split('?')[1] // Remove the url
    highlight = values.split('=')[1]; // Grab the second parmeter
    highlightSpan(highlight); // Highlight it!

}

请注意，这是一个非常基本的例子。我鼓励通过简单学习，并且可以扩展此功能以动态解析所有url变量。 Brain Exersise for you！

如何链接到另一页面上突出显示的文本

3 个答案: