title: How i can redirect to another page and call an event of this new page at the same time?
body: <p>I am a beginner in programming and also I am new to this community, I hope you can help me with my question.
  I want to know how to redirect from page 1 to page 2 and, after that, immediately call an event of this page 2.</p>
  <p>This is the code from page 1:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Page1&lt;/title&gt;
  
    &lt;script type="text/javascript"&gt;
  
      /*it doesn't work (i dont know why)*/
      $(document).ready(function recargar2() {
  
        $("#chiclayo_p").trigger("onclick");
      });
  
      /*it doesn't work (i dont know why)*/
      $(document).ready(function recargar3() {
  
        $("#trujillo_p").trigger("onclick");
      });
    &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;a href="page2.html#options"&gt;Option 1&lt;/a&gt;
    &lt;br&gt;
    &lt;a href="page2.html#options" onclick="recargar2();"&gt;Option 2&lt;/a&gt;
    &lt;br&gt;
    &lt;a href="page2.html#options" onclick="recargar3();"&gt;Option 3&lt;/a&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is the code from page 2:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Page2&lt;/title&gt;
  
    &lt;script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"&gt;
    &lt;/script&gt;
  
    &lt;script&gt;
      $(function () {
        $('.filter').click(function () {
  
          $(this).addClass('active').siblings().removeClass('active')
  
          let valor = $(this).attr('data-nombre');
  
          if (valor == 'lima') {
            $('.lima').show('1000');
            $('.contenedor').not('.' + valor).hide('1000');
            $('.contenedor').filter('.' + valor).show('1000');
  
          } else {
            $('.contenedor').not('.' + valor).hide('1000');
            $('.contenedor').filter('.' + valor).show('1000');
          }
        });
  
      });
    &lt;/script&gt;
  
    
    &lt;style&gt;
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
  
  
      body {
        font-family: 'open sans';
        background: #fff;
      }
  
      .botones li {
        display: inline-block;
        text-align: center;
        margin-left: 20px;
        margin-bottom: 20px;
        padding: 6px 12px;
        border: 1px solid blue;
        list-style: none;
        color: blue;
      }
  
      .botones li:hover {
        background: yellow;
        color: red;
        cursor: pointer;
      }
  
      .botones .active {
        background: rgb(158, 218, 158);
      }
  
      .galeria {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        overflow: hidden;
      }
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="botones"&gt;
      &lt;ul&gt;
        &lt;li class="filter active" data-nombre='lima' id="lima_p"&gt;Lima&lt;/li&gt;
        &lt;li class="filter" data-nombre='chiclayo' id="chiclayo_p"&gt;Chiclayo&lt;/li&gt;
        &lt;li class="filter" data-nombre='trujillo' id="trujillo_p"&gt;Trujillo&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;div class="galeria" id="options"&gt;
  
  
        &lt;div class="contenedor lima"&gt;
          &lt;h1&gt; This is the option 1 - Lima!!!&lt;/h1&gt;
        &lt;/div&gt;
  
        &lt;div class="contenedor chiclayo" style="display: none"&gt;
          &lt;h1&gt; This is the option 2 - Chiclayo!!!&lt;/h1&gt;
        &lt;/div&gt;
  
        &lt;div class="contenedor trujillo" style="display: none"&gt;
          &lt;h1&gt; This is the option 3 - Trujillo!!!&lt;/h1&gt;
        &lt;/div&gt;
  
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What I can't find how to solve is that when I click on option 2 on page 1, in addition to opening page 2, it should show me the selected option &quot;Chiclayo&quot; and the self content of this option; I would like the same thing to happen when clicking on option 3 on page 1, which should select the option &quot;Trujillo&quot; and show me its content. I have tried with the &quot;onclick&quot; event but I have not obtained results, I do not know if it is the correct way or there are better options; maybe with javascript or jquery code. I appreciate you could help me with my query.</p>