Opening two different pages in two different frames

Question

I'm trying to make a frame website, and I'm trying to make a link open up a different page in two different frames.

So basically you click the link and one page (i.e. the home page as a .html file) will open in frame 1 which is the left side, and another page (i.e. a form or animation of some sort that is a completely different .html file) would open in frame 2 on the right side.

JS and/or HTML please. I tried a different JS style which was

$('a.yourlink').click(function(e) {
    e.preventDefault();
    window.open('http://yoururl1.com');
    window.open('http://yoururl2.com');
});

(thanks to Adam Terlson)

along with the html coding:

<a href="#" class="yourlink">Click Here</a>

although I don't know how to target different frames in the same window, only 2 different windows.

Answer 1

Add two empty iframes into the page, on click of the button set their src attribute, like in this example:

$('a').on('click', function(e) {
  e.preventDefault();
  $('.iframe1').attr('src', 'http://www.test.com');
  $('.iframe2').attr('src', 'http://asdf.com/');
})

iframe {
  width: 49vw;
  float: left;
  height: 100vh;
}
html, body {
  margin: 0;
  padding: 0;
}

a {
  background-color: orange;
  color: black;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  display: block;
  width: 80px;
  padding: 10px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">GO</a>
<iframe src="" frameborder="0" class="iframe1"></iframe>
<iframe src="" frameborder="0" class="iframe2"></iframe>