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

admin管理员组

文章数量:1307570

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

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

On clicking a particular DIV in FIRST.html, I want to redirect the user to SECOND.html and show the corresponding 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.

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.

Thank you!

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

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

On clicking a particular DIV in FIRST.html, I want to redirect the user to SECOND.html and show the corresponding 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.

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.

Thank you!

• javascript
• html
• http-redirect
• parameters
• onclick

Share Improve this question Follow asked Jul 30, 2012 at 2:37 LINGSLINGS 3,63055 gold badges3636 silver badges4747 bronze badges 6

• 2 you could store the number in localStorage or sessionStorage using javascript and then look for it in the second page and .... – ama2 Commented Jul 30, 2012 at 2:39
• Do you want that the page should be scrolled down to the div? And are you going to use jQuery? – Fredrik Sundmyhr Commented Jul 30, 2012 at 2:41
• @ama2 - thank you for your ment, i have no idea about it, should look into it. – LINGS Commented Jul 30, 2012 at 2:58
• 1 this could help you with storage: developer.mozilla/en/DOM/Storage , if you need IE 7,8 support you might want to include code.google./p/sessionstorage – ama2 Commented Jul 30, 2012 at 3:01
• 1 You could also send the number/id as a get variable and get it using javascript. – Fredrik Sundmyhr Commented Jul 30, 2012 at 3:07

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 2

You could try something like this:

Add this to 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

$(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();
});

    //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")
    })

in FIRST.html put this code

$('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.

本文标签： A div on click redirect to another HTML page and call a javascript to show a particular divStack Overflow