jquery changes execute on different html page

Question

Is there a way to have a link on one html change activate jquery changes in separate html page? I think this question is related, but I don't understand all of it.

When I click on a link in "page1.html", I want to open link and make changes to "page2.html".

Example:

page1.html

<a href="page2.html#about" class="tab-link">Link to Services</a>

page2.html

<div id="tab1" class="tab-content">
    <h3>Services</h3>
</div>
<div id="tab2" class="tab-content">
    <h3>Contact</h3>
</div>

script.js

$(".tab-link").click(function(){
    $("#tab1").addClass("active");
});

JavaScript when used in browsers in languages such as jQuery only apply to the page currently loaded in the browser. As soon as you refresh, reload or, in your case, load a page no changes will be present. — Djave, Apr 27 '15 at 16:55
@Djave while true, this doesn't have any bearing on the question or answer — Ted, Apr 27 '15 at 17:05

Ted · Answer 1 · 2015-04-27T17:10:36.617

On page 1:

<a href="page2.html#services" class="tab-link">Link to Services</a>
<a href="page2.html#contact" class="tab-link">Link to Contact</a>

When these links are clicked on your site, page 2 will load with a url in the browser something like http://www.yourdomain.com/page2.html#services. You can then get that #services part using window.location.hash in javascript. So to simplify, I set the ID's on your tabs to match that bit in the links:

On page 2:

<!-- I set the ID's to match the hash on the above links -->
<div id="services" class="tab-content">
    <h3>Services</h3>
</div>
<div id="contact" class="tab-content">
    <h3>Contact</h3>
</div>

and the JS on page 2:

$(document).ready(function(){
    // window.location.hash returns the '#...' part of the page URL
    // which from the html I provided, would be #services or #contact.
    // We check to make sure there is one first, and then set your 'active' class
    if(window.location.hash){
        var tabID = window.location.hash;
        $(tabID).addClass('active'); 
    }
});

jquery changes execute on different html page

1 Answers1