当前位置: 首页 > 知识库问答 >
问题:

如何重定向到另一个页面并同时调用此新页面的事件?

尉迟宪
2023-03-14
<!DOCTYPE HTML>
<html>

<head>
  <title>Page1</title>

  <script type="text/javascript">

    /*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");
    });
  </script>

</head>

<body>

  <a href="page2.html#options">Option 1</a>
  <br>
  <a href="page2.html#options" onclick="recargar2();">Option 2</a>
  <br>
  <a href="page2.html#options" onclick="recargar3();">Option 3</a>

</body>

</html>

这是第2页中的代码:

<!DOCTYPE html>
<html>

<head>
  <title>Page2</title>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js">
  </script>

  <script>
    $(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');
        }
      });

    });
  </script>

  
  <style>
    * {
      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;
    }
  </style>

</head>

<body>

  <div class="botones">
    <ul>
      <li class="filter active" data-nombre='lima' id="lima_p">Lima</li>
      <li class="filter" data-nombre='chiclayo' id="chiclayo_p">Chiclayo</li>
      <li class="filter" data-nombre='trujillo' id="trujillo_p">Trujillo</li>
    </ul>
  </div>

  <div>
    <div class="galeria" id="options">


      <div class="contenedor lima">
        <h1> This is the option 1 - Lima!!!</h1>
      </div>

      <div class="contenedor chiclayo" style="display: none">
        <h1> This is the option 2 - Chiclayo!!!</h1>
      </div>

      <div class="contenedor trujillo" style="display: none">
        <h1> This is the option 3 - Trujillo!!!</h1>
      </div>


    </div>

  </div>

</body>

</html>

我找不到怎么解决的是,当我点击第1页的选项2时,除了打开第2页,它应该显示给我选择的选项“chiclayo”和这个选项的自我内容;我希望在点击第1页的选项3时发生同样的事情,该选项应该选择“Trujillo”选项并向我显示其内容。我已经尝试了“onclick”事件,但我没有得到结果,我不知道这是正确的方式还是有更好的选择;也许使用javascript或jquery代码。我很感激你能帮我解决我的问题。

共有1个答案

毋玺
2023-03-14

首先,正如您在第2页所调用的那样,您需要在第1页实现jQuery。

第1页也需要调用。为工作而编写的jquery脚本代码。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js">

用于重定向;

$( "#other" ).click(function() {
  window.location = "/Page2.html#chiclayo_p";
});
 类似资料:
  • 我正在努力使一个向上投票和向下投票的功能在我的网站。然而,有一个我不喜欢的特殊行为,那就是每当用户点击按钮时,他不应该被重定向到另一个页面,而应该保持在同一页面上。 点击upvote按钮后,会转到url,这是我不想要的。我希望它保持在同一页面上,即 models.py views.py urls.py 查看-supplier.html

  • 在我的应用程序中,用户登录后我有一个主页和一些其他页面。问题是,当我在其中一个页面中刷新页面时,它会再次将我发送到主页。这是我的路线: 应用程序组件具有路由器出口 那么,我期待什么呢?首先,如果我是我的“列表”页面()并且我刷新了这个页面,它应该留在那里。在那一页。但现在它将我重定向到本地主机:4200/home。当然,当我单击一个列表项时,它应该将我发送到本地主机:4200/detail/ite

  • 问题内容: 我正在使用ajax调用在服务文件中执行功能,并且如果响应成功,我想将页面重定向到另一个URL。目前,我正在通过使用简单的js“ window.location = response[‘message’];”来做到这一点。但是我需要用angularjs代码替换它。我看过关于的各种解决方案,他们使用了$location。但是我是新手,对实现它有困难。 问题答案: 您可以使用Angular

  • 问题内容: 如何使用Wicket重定向到另一个页面?IIRC,必须在构造函数中引发一些异常,但我不记得是哪个异常。提前致谢。 问题答案: 就像您在自己的答案中指出的那样,投掷a 就能做到这一点,但这实际上是允许重定向并最终在当前页面继续进行的系统的一部分(通常是授权过程的一部分)。如果不是您的情况,但是您仍然必须执行一些中断处理的操作,则最好抛出。 我知道的主要用法是在“重定向到登录页面”过程中。

  • 问题内容: 我有一个登录名和一个注册页面。当随机用户想要登录并且登录成功时,我想将他重定向到另一个.ejs页面(例如UserHomePage.ejs),但是到目前为止,我没有尝试过。 我也想知道,如何在单击按钮时重定向用户。 假设我在显示用户页面上,在这里显示所有用户,然后有“添加另一个使用过的按钮”。我怎么做?在onclick之后如何将用户重定向到Register.js页面? 问题答案: 您应该

  • 如何从我的脚本代码重定向到另一个vue页面。我正在使用router.push(),但无法重定向到我想要的vue页面。 以下是我的源代码。 src/路由器/索引。js src/components/IndexPage。vue 运行此代码后,我得到一个错误,它表明: ReferenceError:评估时未定义路由器 src/main。js 此外,我还可以通过浏览器访问相同的链接http://local