是否可以在单击后突出显示其他页面中的元素(可能是文本段落)?

Is it possible to highlight an element (could be a text paragraph) in other page after click?

本文关键字：元素 文本 段落 单击 是否 其他 显示      更新时间：2023-09-26

例如，在第1页中，我有打开第2页的链接A，并且在该页中突出显示了特定的段落。比方说，如果从另一个页面访问第2页，它将突出显示文本的其他部分。它几乎就像目标页面的特定区域的锚，但在内容块(文本)上添加了高亮显示。我不需要详细的解决方案，我只需要知道它是否可能和一个非常简短的解释。非常感谢您的宝贵时间。

您可以将哈希片段附加到包含需要突出显示的文本(例如href="page2.html#yourid")的元素的id的链接，

在page2.html中使用:target伪类应用此样式

#yourid:target {
   background: yellow;
}

可以使用:target CSS伪类。这个链接提供了一些很好的信息。

这里有一个例子，但是只要假设链接来自不同的页面:)

:target {color: red;}
<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>
<div id="one">First Content</div>
<div id="two">Second Content</div>
<div id="three">Third Content</div>
<div id="four">Fourth Content</div>
<div id="five">Fifth Content</div>

就像你会被告知这个答案一样。Stack Overflow所做的是，除了把你引向这个问题，它强调了我的答案。它通过基于URL中的散列(#)执行操作来实现这一点。这方面的一个例子是关于我最近收到通知的评论的散列:

散列URL示例

与#comment51329968_31694103散列;

动作将由CSS或JS驱动，这取决于你想要你的高亮如何发生。简短的回答是:这是可能的。

当然可以。

。第一个想法是:php得到。如果你不习惯，你可能会觉得这很棘手，但事实并非如此。哈希方法(参见其他答案)很好，但这仅限于一个元素。

假设你有一个页面A，——links——>页面B，有一个段落<p id="lorem42">...</p>，你想突出显示。

A页的链接:<a href="pageB.php?highlighted=lorem42">click me</a>

pageB.php:注意扩展名php !: 

     <?php /*put this line at the first line, thus it is a php file*/ ?>
      <html>
<head>
    <?php
      if( isset($_GET["highlighted"] && $_GET["highlighted"]!=""){
    /*get the id to highlight */
    $php_id_highlight = $_GET["highlighted"]/*lorem42*/ ;
    /* write the script in html */
    echo "<script>..JS to highlight element with id==$php_id_highlight</script>";
      }
        ?>
    </head>
    <body>
    <p id="lorem42">I can be highlighted if pageB is launched from page A !</p>
    </body>
    </html>

现在，假设你有页面A，——links——>页面B，有三个段落<p id="lorem42">...</p>, <p id="lorem43">...</p>, <p id="lorem44">...</p>，你想突出显示。

A页的链接:<a href="pageB.php?highlighted=lorem42,lorem43, lorem44">click me</a>

或者你可以高亮，改变颜色…有创造力

A页的链接:<a href="pageB.php?highlighted=lorem42&red=div42&animate=icons">click me</a>

相关文章：