DEV Community

sa3i0l
sa3i0l

Posted on

Forward click on other page

So you have some element on other page that you need to click when that page is opened from page you're at.
You have <a> in index.html and when that clicks, it needs to open projekti.html and click on respective <a>.
Depending which one you want to click, on projekti.html you assign id, and in index.html you put <url_to_other_page>#<id_of_other_element>

And in projekti.html you put script tag before closing <body>

<script src="js/my_js.js"></script>
Enter fullscreen mode Exit fullscreen mode

Full code:

index.html

<li>


                  <a href="index.html">Početna</a>
                </li>

                <li class="nav__dropdown">
                  <a href=""> Projekti </a>
                  <i class="ui-arrow-down nav__dropdown-trigger"></i>
                  <ul class="nav__dropdown-menu">
                    <li>
                      <a href="projekti.html#stambeno">Stambeno - Turistički objekti</a>
                    </li>

                    <li>
                      <a href="projekti.html#upravni">Upravni objekti</a>
                    </li>
                    <li>
                      <a href="projekti.html#industrijski">Industrijski objekti</a>
                    </li>
                    <li>
                      <a href="projekti.html#javni">Javni objekti</a>
                    </li>
                    <li>
                      <a href="projekti.html#enterijer">Enterijer</a>
                    </li>
                  </ul>
                </li>

Enter fullscreen mode Exit fullscreen mode

projekti.html

  <div class="portfolio-filter text-center">
            <a href="#" class="filter active" data-filter="*">Svi</a>
            <a href="#" id="stambeno" class="filter" data-filter=".stambeno">Stambeno - Turistički</a>
            <a href="#" id="upravni" class="filter" data-filter=".upravni">Upravni objekti</a>
            <a href="#" id="industrijski" class="filter" data-filter=".industrijski">Industrijski</a>
            <a href="#" id="javni" class="filter" data-filter=".javni">Javni objekti</a>
            <a href="#" id="enterijer" class="filter" data-filter=".enterijer">Enterijer</a>
          </div>


... 
  <script src="js/my_js.js"></script>
</body>
... 

Enter fullscreen mode Exit fullscreen mode

my_js.js


 window.addEventListener('DOMContentLoaded', () => {

    if (window.location.hash) {
      const target = window.location.hash.substring(1); 

      // Trigger click event on the corresponding element
      const element = document.getElementById(target);
      if (element) {
        element.click();
      }
    }
  });




Enter fullscreen mode Exit fullscreen mode

Top comments (0)