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

• 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

3 Answers 3

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.