JQuery: One function between two sites. How to do?

Question

I have a question. my example_1.html looks like this:

<main role="main">   <div class="container">
<div class="card">
  <div class="card-header">
    <ul class="nav">
      <li class="nav-item">
        <a id="Linkitem1" class="Linkitem" href="#" role="button" title="">item1</a>
      </li>
      <li class="nav-item">
        <a id="Linkitem2" class="Linkitem" href="#" role="button" title="">item2</a>
      </li>
      <li class="nav-item">
        <a id="Linkitem3" class="Linkitem" href="#" role="button" title="">item3</a>
      </li>
    </ul>
  </div>

  <!--Content item1-->
  <div id="item1" class="item card-body" data-parent="#card-content">
    <h5 class="card-title">title for item 1</h5>
    <p class="card-text">content item 1.</p>
  </div>

  <!--content item 2-->
  <div id="item2" class="item card-body" data-parent="#card-content">
    <h5 class="card-title">title item 2</h5>
    <p class="card-text">content item 2</p> </div>
    <!--content 3-->
    <div id="item3" class="item card-body" data-parent="#card-content">
      <h5 class="card-title">title item 3</h5>
      <p class="card-text">content item 3</p>
    </div>
  </div> </main>

And script.js is looking like this:

$(".Linkitem").click(function(){ event.preventDefault(); let dataId = $(this).attr('data-id');
$('.item[data-id='+dataId+']').fadeIn(2500);
$('.item:not([data-id='+dataId+'])').hide(); $('.Linkitem[data-id='+dataId+']').addClass("active btn-warning");
$('.Linkitem:not([data-id='+dataId+'])').removeClass("active btn-warning"); });

Now I would like to combine example_1.html with my example_2.html, which has this content:

<button><a href="">button1</a></button> 
<button><a href="">button2</a></button> 
<button><a href="">button3</a></button>

And would like to follow thing:

If I have clicked on example_2.html on the button1, then it has to open a new window(example_1.html and its like, I have clicked on "Linkitem1".

Then button2, like I have clicked on Linkitem2 and button3 like Linkitem3.

Am a beginner and therefore I need help. How should to write javascript code to do this? Someone who can help?

sonic sonic · Accepted Answer · 2020-01-06T14:35:11

You can pass some parameter in link when opening new window.

So when your example_2.html would look like this ( target="_blank" opens new window but I think you have already know that)

<a href="example_1.html#Linkitem1" target="_blank">button1</a>
<a href="example_1.html#Linkitem2" target="_blank">button2</a> 
<a href="example_1.html#Linkitem3" target="_blank">button3</a>

Assuming you attach js for example_1.html you can then read it like that

if(window.location.hash == '#Linkitem1'){
   // do something with linkitem1
}
else if (window.location.hash == '#Linkitem2`){
 // do smth with linkitem2
}
...

of course there is a way to make it more generic but I want to give only the idea.

JQuery: One function between two sites. How to do?

2 Answers