logo标签列表

如何在另一个页面链接到高亮文本

javascriptcsstransparencyhighlightinghtml
3
我有一个静态的HTML页面，在其中使用span标签和javascript来突出显示所选文本的部分。在另一页上，我想链接回这个HTML页面，并指定高亮显示处于活动状态。请参见下面提供的代码。 问题在于需要style="background: transparent"标签。必须存在，以便仅在单击时激活高亮显示，但这也意味着当我尝试按照下面的规定链接到此页面时，高亮显示不起作用。
非常感谢您的任何帮助。谢谢。 单击此链接可突出显示文档中指定的文本部分。 
<span title="Warscape"><a title="Warscape" onclick="highlightSpan(this.getAttribute('title'))" href="">Warscape</a></span>

点击后会突出显示的文本。

这段文字与IT技术无关。
<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 关于高亮的处理

.highlight {background:#bcdbda;}

Javascript关于高亮的问题

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";       
    } 
}
}
3个回答
8
0

这是一个有趣的问题。如果您想让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 变量。对你来说是大脑运动！
Greg： 请原谅我的无知。我是JavaScript的新手。我应该在哪里调用函数？像这样在我的链接中吗？<a href="j_62sept.html?highlight=Warscape" onClick="CheckForHighlight()"> - Kaci
0
我对JavaScript还很陌生，所以那个解决方案有点难以理解。我不确定如何将其应用到我的问题上。不过还是谢谢你。 - Kaci
没有问题。@Greg 给你发布了更简单的例子。在目标页面的 body 标签内使用 onload 事件调用他的函数，代码如下: <body onload="CheckForHighlight()">。 - Janez
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接