How can I specify which items will appear on this page through a link on another page-CodePudding

page 1 : When you click on one of these links, it should take you to the second page, and only the item for this part will appear

<ul >
    <li ><a href="page2.html/#webdesign-filter">Web Design</a></li>
    <li ><a href="page2.html/#responsive-filter">Responsive</a></li>
    <li ><a href="page2.html/#wordpress-filter">Wordpress</a></li>
 </ul>

page 2:

<div>
     <div  id="webdesign-filter">
      <h4>Web Design</h4>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>

    <div  id="responsive-filter">
      <h4>Responsive</h4>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>

    <div   id="wordpress-filter">
      <h4>Wordpress</h4>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

CodePudding user response：

<div>
<div  id="webdesign-filter">
    <h4>Web Design</h4>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

<div  id="responsive-filter">
    <h4>Responsive</h4>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

<div   id="wordpress-filter">
    <h4>Wordpress</h4>
    <p>Lorem ipsum dolor sit amet.</p>
</div>
</div>


<style>
.hidden {
    display: none;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const { hash } = document.location
    if (hash) {
        if (document.querySelector(hash)) {
            document.querySelector(hash).style.display = "block"
        }
    }
});
</script>