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

发布于 2024-11-01 18:37:40 字数 1505 浏览 0 评论 0原文

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

问题在于所需的 style="background:透明" 标记。它必须在那里,以便突出显示仅在单击时才处于活动状态,但这也意味着当我尝试链接到以下指定的此页面时,突出显示不处于活动状态。

任何帮助将不胜感激。谢谢。

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

<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 重新。突出显示

.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";       
    } 
}
}

I have a static HTML page where I am using span tags and javascript to highlight selected portions of text. On a separate page, I would like to link back to this HTML page and have specified highlighting active. See provided code below.

The issue is the required style="background: transparent" tag. It has to be there so that the highlight is only active when clicked upon, but this also means that when I attempt to link to this page as specified below, the highlight is not active.

Any help would be much appreciated. Thanks.

Clicking this link highlights specified portions of text in the document.

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

This is the text that is highlighted when clicked.

<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 & now the Army of the Frontier [is?] formed</span>

Code to link to page with highlighting.

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

CSS re. highlighting

.highlight {background:#bcdbda;}

Javascript re. highlighting

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";       
    } 
}
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

久而酒知 2024-11-08 18:37:40

我知道这是一个旧线程,但现在可以使用此处描述的滚动到文本片段功能来解决 Chrome 的此问题:

https://chromestatus.com/feature/4733392803332096

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

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

I recognise that this is an old thread, but this problem can now be addressed for Chrome using the Scroll to Text Fragment feature described here:

https://chromestatus.com/feature/4733392803332096

In short, it allows you to provide a link which jumps to a specific string of text and (in Chrome's implementation) highlights that section. A basic version of the link would look like this:

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

你与清晨阳光 2024-11-08 18:37:40

when your clicking the links to the page where the highlighting takes action (<a href="j_62sept.html?highlight=Warscape">
) you need to somehow read querystring value on that page to highlight the right span. You can use javascript for this. See this example: http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx

纸短情长 2024-11-08 18:37:40

这是一个有趣的问题。如果您想让 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 变量。给你的大脑锻炼!

This is an interesting question. If you'd like to have the javascript pick up on parameters in the url, you can use the window.location.href parameter to pull it out. So, quite simply the following function:

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!

}

Please Note that this is a very basic example. I encourage learning through simplicity, and this function can be expanded to dynamically parse all url varaibles. Brain Exersise for you!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文