单击索引中的链接时，请在不同页面上更改活动类

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时，将显示"隐藏的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并隐藏其他部门。

这是我的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();
    });
});

如果可能

非常感谢！

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页的负载中，您可以在索引参数中读取值，然后根据数字隐藏/显示您的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）您通常可以在上面执行相同的操作，但是在单击索引页面上的一个列表项时，只需在查询字符串中添加一个参数，然后在第2页上读取该内容的内容。烹饪而不是查询字符串