简体   繁体   中英

Php: How to link a URL with ID targeting a html section?

New to php :)

Working on a blog project, I want to navigate (send) the users to another page with specific (complete) post and its comments by clicking "Comments" link on index page.

I wish to send the user directly to the comments div. but I also have to provide post ID with the link after question mark"?". I want to know where to include #comments div (html section) in the url.

Thank you in advance.

You can use empty <a> tag to do this:

Paste this before your comments <div> :

<a name="comments"></a>

And try to enter your page with #comments tag, eg: http://mysite.com/example.php?postID=123#comments

First, assign the id to the element you want browser (user) scroll to.

Ex.

<div id="mycomment">

Then, generate the url that append with # and id you choose.

Ex.

http://example.com/post/1/#mycomment

Add a name to an anchor tag <a name='anchor1'> and link it to href using prefix # <a href='#anchor1'>Comment</a>

<a href="#anchor1">First</a> |
<a href="#anchor2">Second</a> |
<a href="#anchor3">Third</a> |
<a href="#anchor4">Forth</a> |
<a href="#anchor5">Fifth</a> 

<a name='anchor1'>First comment header</a>
<p>First comment content<br>First comment content<br>First comment content<br>First comment content<br>First comment content<br>First comment content<br>First comment content<br>First comment content<br>First comment content<br>First comment content<br>First comment content<br>First comment content<br>First comment content<br>First comment content<br></p>

<a name='anchor2'>Second comment header</a>
<p>Second comment content<br>Second comment content<br>Second comment content<br>Second comment content<br>Second comment content<br>Second comment content<br>Second comment content<br>Second comment content<br>Second comment content<br>Second comment content<br>Second comment content<br>Second comment content<br>Second comment content<br>Second comment content<br></p>

<a name='anchor3'>Third comment header</a>
<p>Third comment content<br>Third comment content<br>Third comment content<br>Third comment content<br>Third comment content<br>Third comment content<br>Third comment content<br>Third comment content<br>Third comment content<br>Third comment content<br>Third comment content<br>Third comment content<br>Third comment content<br>Third comment content<br></p>

<a name='anchor4'>Fourth comment header</a>
<p>Fourth comment content<br>Fourth comment content<br>Fourth comment content<br>Fourth comment content<br>Fourth comment content<br>Fourth comment content<br>Fourth comment content<br>Fourth comment content<br>Fourth comment content<br>Fourth comment content<br>Fourth comment content<br>Fourth comment content<br>Fourth comment content<br>Fourth comment content<br></p>

<a name='anchor5'>Fifth comment header</a>
<p>Fifth comment content<br>Fifth comment content<br>Fifth comment content<br>Fifth comment content<br>Fifth comment content<br>Fifth comment content<br>Fifth comment content<br>Fifth comment content<br>Fifth comment content<br>Fifth comment content<br>Fifth comment content<br>Fifth comment content<br>Fifth comment content<br>Fifth comment content<br></p>

If comment detail is in other page call it as

<a href="other_page.php#anchor1">First</a> |
<a href="other_page.php#anchor2">Second</a> |
<a href="other_page.php#anchor3">Third</a> |
<a href="other_page.php#anchor4">Forth</a> |
<a href="other_page.php#anchor5">Fifth</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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM