是否可以从不同的页面添加到bootstrap 4 nav-pill选项卡面板的链接？

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link" href="page1.html#tab1">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="page2.html#tab2">Tab 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="page3.html#tab3">Tab 3</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane" id="tab1">
    <h3>Tab 1 Content</h3>
    <p>This is the content of Tab 1.</p>
  </div>
  <div class="tab-pane" id="tab2">
    <h3>Tab 2 Content</h3>
    <p>This is the content of Tab 2.</p>
  </div>
  <div class="tab-pane" id="tab3">
    <h3>Tab 3 Content</h3>
    <p>This is the content of Tab 3.</p>
  </div>
</div>

$(document).ready(function() {
  // 处理链接的点击事件
  $('a.nav-link').click(function(e) {
    e.preventDefault(); // 阻止默认的链接跳转行为
    var target = $(this).attr('href'); // 获取目标面板的ID
    $('html, body').animate({
      scrollTop: $(target).offset().top // 滚动到目标面板
    }, 500);
  });
});