Question

我有一个包含6个Div的HTML文档，我编写了一个javascript代码，根据选择的div（6个vars和6个函数）更改标题，例如：

var divSelect = document.getElementById("firstDiv");


divSelect.onclick = function () {
    var mainHeading = document.getElementById("heading");
    mainHeading.innerHTML = "You have selected the first option";

};

然后我有一个锚点div链接到另一个HTML页面，当它打开时我希望它知道从第一个HTML页面中选择了哪个div，然后根据选择输入一个新的标题。

所以我需要知道基于被点击的div操作六个函数中的哪一个。

任何帮助都非常感激。

Answer 1

您可以在url查询中传递它。传递例如id参数，如下所示：http://example.com/secondpage.html?firstpagedivid=firstDiv然后在第二页上，您可以解析网址以获取div id或您传递的任何参数。

您可以在此处找到如何在第二页上获取网址参数：link

HTML：

<div class="clickable" id="firstDiv">first</div>
<div class="clickable" id="secondDiv">second</div>
<div class="clickable" id="thirdDiv">third</div>
<br>
<div id="heading"></div>
<br> 
<a id="navigator" href="second.html">Next page</a>

使用Javascript：

(function() {
    var currentSelectedDiv;
    var heading = document.getElementById('heading');
    var navigator = document.getElementById('navigator');
    var divs = document.querySelectorAll('.clickable');

    for(var i=0; i<divs.length; i++) {
        divs[i].onclick = function(e) {
            var target = e.target;
            currentSelectedDiv = target.getAttribute('id');
            heading.innerHTML = ['You have selected ', currentSelectedDiv].join('');
        }
    }

    navigator.onclick = function(e) {
        e.preventDefault();
        var a = e.target;
        var href = a.getAttribute('href');
        href += '?previousPageDivId=' + currentSelectedDiv;
        alert(href);
        //Just uncomment line below
        //document.location.href = href;
    }
})();

这里有一个工作示例：https://jsfiddle.net/3wdzh2d4/

确定使用JavaScript

1 个答案: