javascript - 单击索引中的链接后更改不同页面上的事件类 onClick？

Question

在我的索引中，我有这些链接

<li class="index1"><a href="page2.html"> Link1 in index </a></li>
<li class="index1"><a href="page2.html"> Link2 in index </a></li>
<li class="index1"><a href="page2.html"> Link3 in index </a></li>

我希望当我单击链接 2 时，显示 page2.html 上隐藏的 div#2，并隐藏默认显示的 div#1。我在 page2.html 上的代码是

<li class="page2 active" target="1"> Link1 on page 2 </li>
<li class="page2" target="2"> Link2 on page 2</li>
<li class="page3" target="3"> Link3 on page 2</li>

<div id="div1" class="targetDiv">
<p> Text here </p>

<div id="div2" class="targetDiv">
<p> Text here </p>

<div id="div3" class="targetDiv">
<p> Text here </p>

至此，点击页面2中的链接会改变事件li，显示相应的div并隐藏其他div。

这是我的 jQuery 代码

jQuery('.page2').click(function(){
  jQuery('.page2').removeClass('active');
  jQuery(this).addClass('active');
});

jQuery(function(){

    jQuery('.page2').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+$(this).attr('target')).show();
    });
});

如果可能的话，我希望 .page2 点击函数中发生的事情与您从 index.html 中点击 .index1 时发生的事情类似 *

非常感谢!!

Answer 1

编辑*

因为 page2.html 是一个完全独立于索引页的页面，您必须执行以下两项操作之一来修改元素。

1) 单击第一页上的索引后，您可以将参数添加到查询字符串。

<li><a href="page2.html?index=1"> Link1 in index </a></li>
<li><a href="page2.html?index=2"> Link2 in index </a></li>
<li><a href="page2.html?index=3"> Link3 in index </a></li>

点击后，您将转到带有 URL 中索引参数的第 2 页，在加载第 2 页时，您可以读取索引参数中的值，然后根据数字隐藏/显示您的 HTML 元素。

例如:

你可以将这个 jquery 添加到 page2.html

$( document ).ready(function() {

   var index = getParameterByName('index')
   $('ul > li').not('#target' + index).hide()
   $('div').not('#div' + index).hide()
   $('#div'+ index).show();
   $('#target' + index).addClass('active');

});


function getParameterByName(name) {
    url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

2) 你通常可以做上面同样的事情，但不是在查询字符串中添加参数，而是在点击索引页面上的列表项之一时创建一个 cookie，然后在第 2 页读取内容 cooking 而不是查询字符串