JQuery：两个站点之间的一个功能。怎么做？

Question

我有一个问题。我的 example_1.html 看起来像这样：

<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>

而 script.js 看起来像这样：

$(".Linkitem").click(function(){ event.preventDefault(); 让 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-警告"); });

现在我想将 example_1.html 与我的 example_2.html 结合起来，其中包含以下内容：

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

并且想关注的事情：

如果我点击了 button1 上的 example_2.html，那么它必须打开一个新窗口（example_1.html 等，我点击了“Linkitem1”。

然后是button2，就像我点击了Linkitem2和button3，就像Linkitem3一样。

我是初学者，因此我需要帮助。应该如何编写javascript代码来做到这一点？谁能帮忙？

Answer 1

您可以在打开新窗口时在链接中传递一些参数。

所以当你的 example_2.html 看起来像这样时（target="_blank" opens new window 但我想你已经知道了）

<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>

假设您将js 附加到example_1.html，那么您可以这样阅读它

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

当然有一种方法可以使它更通用，但我只想给出这个想法。

Answer 2

你必须先添加 data-id 标签才能运行你的脚本

$('.item[data-id='+dataId+']')