单击上一页后切换元素 class

Question

我被困了很长时间所以我需要一些帮助来解决我的问题。

我有 2 页。从第一个 page A，我 <a href> 那 link 到另一个页面。这是 link :

<div class="sucre" id="sucreFirst"><a href="ecole2.html"><img src="_img/slide06.jpg" width="634" height="308" alt=""/></a></div>

在另一个 page B 上，我有一个用 CSS class 隐藏和显示内容的菜单。这是菜单的代码：

 <div id="menu_G">
    <p><a href="#" onClick="document.getElementById('Titre1').className='ON';document.getElementById('Titre2').className='OFF';document.getElementById('Titre3').className='OFF'">Le mariage de 2 expériences</a></p>
    <p><a href="#" onClick="document.getElementById('Titre1').className='OFF';document.getElementById('Titre2').className='ON';document.getElementById('Titre3').className='OFF'">Né d'une conviction</a></p>
    <p><a href="#" onClick="document.getElementById('Titre1').className='OFF';document.getElementById('Titre2').className='OFF';document.getElementById('Titre3').className='ON'">Des DRH militants</a></p>
  </div>

如您所见，page B 设置为首先显示 titre1。

<div class="ON" id="Titre1">content</div>
<div class="OFF" id="Titre2">content</div>
<div class="OFF" id="Titre3">content</div>

当我点击 page A 中的 link 时，我希望将 titre3 class 的属性更改为 ON.

继续，当我点击 page A 中的 link 时，我希望它显示 page B 的 titre3 内容。

我尝试了很多东西，但总是 link 到 titre1。

感谢阅读，

阿尔弗雷德

Answer 1

好吧，你有多种方法可以实现你的目标，所以我会给你一个想法和一个起点。你真正需要做的是将信息从源页面传输到目标页面，传输的信息将是要打开的元素和要关闭的元素。

在页面之间发送数据的一种简单方法是通过 URL 查询字符串。您可以通过简单地将其添加到 link.

来创建查询字符串

将您的 link 修改为：

href="ecole2.html?on=1&firstOFF=2&secondOFF=3"

来自?的部分是查询字符串，其结构是：

?key=value&key=value&key=value...&key=value

现在，当输入 ecole2.html 和 link 时，您将能够获得这 3 个变量（on、firstOFF 和 secondOFF ) 通过查询字符串解析器 (you have many ways to do it).

创建一个函数来获取参数并设置它们的可见性，例如：

function setVisibility(onElement, firstOffElement, secondOffElement)
{
    document.getElementById(onElement).className='ON';
    document.getElementById(firstOffElement).className='ON';
    document.getElementById(secondOffElement).className='ON';
}

在页面加载（onload 事件）时使用每个参数调用此函数，您就完成了。

<body onload="setVisibility(on, firstOff, secondOff)">

当 on 例如将是字符串 "Titre"+onParsedVariableFromQueryString

Here is a jsdiffle 带有一个解析 URL 函数，并且实际解析了三个以上述相同方式定义的变量。由于问题不是直接关于 URL 解析，我认为没有必要在这里发布实际的解析方法代码。

有了上面的逻辑和例子，我相信你可以自己进步。

单击上一页后切换元素 class

Switch element class after a click from a previous page

javascript

class

onload