Is it possible to highlight an element (could be a text paragraph) in other page after click?
Question
For example, in page 1, I have the link A which opens the page 2 and in that page it highlights a specific paragraph. Let's say, if page 2 is accessed from another page it will highlight other part the text. It's almost like an anchor to a specific area of the target page but adding the highlight on a block of content (text). I don't need a detailed solution for this, I will only need to know if it's possible and a very brief explanation. Thank you very much for your time.
4 answers
solution1
3 2015-07-30 12:30:33
You could append an hash fragment to your link with the id of the element that contains the text that needs to be highlighted (eg href="page2.html#yourid" ),
In page2.html apply this style using :target pseudoclass
#yourid:target {
background: yellow;
}
solution2
1 2015-07-30 12:36:09
You can use the :target CSS pseudo class. This link provides some good information.
Here is an example, but just pretend that the links are from different pages :)
: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>
solution3
1 2015-07-30 12:36:16
Just in a way as you will be notified about this answer. What Stack Overflow does is, in addition to redirecting you to this question, is highlights my answer. It does that by taking an action based on a hash (#) in the URL. An example of this would be this hash about the comment I was notified recently:
with the #comment51329968_31694103 hash;
The action would be driven by either CSS or JS and it's up to you how you want your highlight to happen. Short answer is: it is possible.
solution4
0 ACCPTED 2015-07-30 12:32:44
Of course it is possible.
Many ways. First idea in mind : php get. If you're not used to, you can find this tricky, but it is not at all. Hash method (see other answers) is good but this limits to one element only.
Let's say you have page A, --links--> page B with a parapgraph <p id="lorem42">...</p> that you want highlighted.
The link in page A: <a href="pageB.php?highlighted=lorem42">click me</a>
pageB.php: note the extension 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>
Now, Let's say you have page A, --links--> page B with 3 parapgraph <p id="lorem42">...</p> , <p id="lorem43">...</p> , <p id="lorem44">...</p> that you want highlighted.
The link in page A: <a href="pageB.php?highlighted=lorem42,lorem43, lorem44">click me</a>
Or you can highlight, change color... be creative
The link in page A: <a href="pageB.php?highlighted=lorem42&red=div42&animate=icons">click me</a>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.