Question

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!

Answer 1

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