load external html files into multiple DIVs on single page

[Loyal]

Greetings,
Trying to understand how to load from a master menu (UL-LI styled) different external html files into multiple DIV s all on the same page.

I have a note taking system that runs offline that uses html5 css3 and frames. It uses 2 rows and 4 columns for the desktop version (2 rows 6 columns for netbooks and 2 rows 4 columns for a tablet).
Each has its own name and id tag in it.
The first row is for viewing files while the bottom row is indexes. So that top-row column-1 views what bottom-row column-1 indexs, the same with columns 2 and 3. the fourth colum is the main index.
This is big as it was developed both for students at school and later I developed for bible study.
(in case you wonder why up to three viewing DIV one is for notes the others display info such as teachers questions or the article they are to read and take notes on. Sometimes a vocabulary list or teachers guide. )

Here is what I understand the load command is in Jquery

$(function() {
var $menu = $('#menu'), 
    $target = $('#target');

$menu.on('click', '> a', function(event) {
    var $this = $(this);
    event.preventDefault();
    $target.load($this.attr('href'));
});
});

But I have more than one div to load into. Ive set the target command in the index files individual links. Thus it loads the file into the targeted frame. How do I do this using jquery since target seems not supported in flexbox?

Do I write something in my individual links?
I saw a command but not sure if I understand it right - data-target. Do I use this in my links just like target? But how then do I let the jquery know this command tells what DIV to load into?
I also saw a on-click command used in the links but how would that target the DIV to load into?
Do I put some code into the VAR in the script?

It seems Jquery is the way to go. But I am facing a big learning curve (not afriad to learn - Im a teacher!) But Im quite lost in what I am reading so far.
Any suggestions places to read up and learn what I am tryign to do?

[kgweb]

I do not use jquery and I am not sure that I understand the requirement here so up to now I have not attempted to answer this question. But since there have not been any other responses I will have a go.

Using javascript you can put an object tag which loads HTML from a file inside divs as follows:

<div id="div1">
<object data="htmlfile1.html" type="text/html">
</object>
</div>

<div id="div2">
<object data="htmlfile2.html" type="text/html">
</object>
</div>

The file is loaded and its contents displayed at the position of the object tags. The HTML file can contain any legal HTML and you can do this as many times as you like in one document. I am not sure if it is legal to nest object tags.

Does this help?