单击时的 div 重定向到另一个 HTML 页面并调用 javascript 以显示特定的 div

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11714819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 14:06:22  来源:igfitidea点击:

A div on click redirect to another HTML page and call a javascript to show a particular div

javascripthtmlredirectparametersonclick

提问by LINGS

I have two html files namely FIRST.html and SECOND.html

我有两个 html 文件,即 FIRST.html 和 SECOND.html

FIRST.html has DIVs with IDs A1 to A100, SECOND.html has DIVs with IDs B1 to B100

FIRST.html 有 ID 为 A1 到 A100 的 DIV,SECOND.html 有 ID 为 B1 到 B100 的 DIV

On clicking a particular DIV in FIRST.html, I want to redirect the user to SECOND.html and show the corresponding DIV.

单击 FIRST.html 中的特定 DIV 时,我想将用户重定向到 SECOND.html 并显示相应的 DIV。

For example, if a user clicks DIV id=A10 in FIRST.html, he should be redirected to SECOND.html and be shown the DIV id=B10.

例如,如果用户点击 FIRST.html 中的 DIV id=A10,他应该被重定向到 SECOND.html 并显示 DIV id=B10。

I need thoughts on how this could be done, I would like to know if we could pass some parameters from one page to another and then call a javascript using those parameters.

我需要思考如何做到这一点,我想知道我们是否可以将一些参数从一个页面传递到另一个页面,然后使用这些参数调用 javascript。

Thank you!

谢谢!

回答by Charlie

    //FIRST.html
    $("#A10").click(function () {
        document.location.href = "SECOND.html?id=B10";
    })

    //SECOND.html

    $(function () {
        //Prepare the parameters
        var q = document.location.search;
        var qp = q.replace("?", "").split("&");
        var params = {};
        $(qp).each(function (i, kv) {
            var p = kv.split("=");
            params[p[0]] = p[1];
        });
        var idToOpen = params["id"]

        $("#" + idToOpen).show();
    })

    //You can add some other parameters
    document.location.href = "SECOND.html?id=B10&message=SomeMessage";

    //Get it like this

    $(function () {
        //Prepare the parameters
        var q = document.location.search;
        var qp = q.replace("?", "").split("&");
        var params = {};
        $(qp).each(function (i, kv) {
            var p = kv.split("=");
            params[p[0]] = p[1];
        });


        var idToOpen = params["id"]
        var message = params["message"]
        $("#" + idToOpen).show();
        alert("message")
    })

回答by Fredrik Sundmyhr

You could try something like this:

你可以尝试这样的事情:

Add this to FIRST.html

将此添加到 FIRST.html

$(document).ready(function() {
    $('div').click(function () {
       id = $(this).attr('id').substring(1);
       window.location = 'SECOND.html?id=' + id;
    });

    var getVar = location.search.replace('?', '').split('=');
    $('div[id$=' + getVar[1] + ']')[0].scrollIntoView();
});

Add this to SECOND.html

将此添加到 SECOND.html

$(document).ready(function() {
    $('div').click(function () {
       id = $(this).attr('id').substring(1);
       window.location = 'FIRST.html?id=' + id;
    });

    var getVar = location.search.replace('?', '').split('=');
    $('div[id$=' + getVar[1] + ']')[0].scrollIntoView();
});

回答by Miljan Puzovi?

in FIRST.html put this code

在 FIRST.html 中放置此代码

$('div').click(function() {
var someId = $(this).attr("id");
window.open('SECOND.html/#'+someId);
  });

Or you can use your full URL path instead SECOND.html/#. Its just an idea, not tested, but you can try it. P.S. Those are two different pages, so you can put same ID's on both to try this example. It's not pure JavaScript but Jquery.

或者您可以使用完整的 URL 路径代替 SECOND.html/#。它只是一个想法,未经测试,但您可以尝试一下。PS 那是两个不同的页面,因此您可以将相同的 ID 放在两个页面上以尝试此示例。它不是纯 JavaScript 而是 Jquery。