我是一个编程初学者，也是这个社区的新手，我希望你能帮助我解决我的问题。我想知道如何从第1页重定向到第2页，然后立即调用该页2的事件。
这是第1页的代码:
<!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页，它应该显示我所选择的选项"这个选项的自我内容;我希望同样的事情发生时，点击选项3在第1页，这应该选择选项"Trujillo"让我看看它的内容。我试过使用"onclick"事件发生但我没有得到结果，我不知道这是正确的方式还是有更好的选择;也许用javascript或jquery代码。我很感激你能帮我解决我的问题。
首先，正如您在第2页中所说的，您需要在第1页上实现jQuery。
Page 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";
});
您可以将选项Id作为查询参数传递给第1页上这样的按钮的点击函数
<a onclick="recargar('lima_p');">Option 1</a>
<br>
<a onclick="recargar('chiclayo_p');">Option 2</a>
<br>
<a onclick="recargar('trujillo_p');">Option 3</a>
然后将第1页重定向到第2页，像这样传递这个值
function recargar(option) {
window.location.href = "page2.html" + "#" + option;
}
在第2页，您可以获取此查询参数并突出显示所选选项并显示相关内容，如
// Add function body -- <body onload="onload()">
function onload() {
var option = window.location.hash.substring(1);
var element = $("#" + option);
alert(element);
highlightDiv(element);
}
function highlightDiv(option) {
$(option).addClass('active').siblings().removeClass('active')
let valor = $(option).attr('data-nombre');
if (valor == option) {
$('.lima').show('1000');
$('.contenedor').not('.' + valor).hide('1000');
$('.contenedor').filter('.' + valor).show('1000');
} else {
$('.contenedor').not('.' + valor).hide('1000');
$('.contenedor').filter('.' + valor).show('1000');
}
}
$(function () {
$('.filter').click(function () {
highlightDiv(this);
});
});
您可以做的是将所选选项作为查询参数传递，然后从第1页重定向到第2页。然后，在第2页的ready事件中，您可以读取传递的查询参数并相应地显示div。
基于这个问题，您可以通过使用cookie或本地存储来实现，查询参数
正如Fizer Kahn在他的回答中所说，最推荐的方式是查询参数。