Javascript 如何将DRY应用于具有几乎相同的块的一系列HTML文件？

我有一个页面链，每个页面都包含这个HTML

  <div class ="container">
    <h3>PROVIDER ENROLLMENT APPLICATION</h3>
  </div>

  <div class ="tabs">
     <a href="tabsA.html"><span>Sec A</span></a>
     <a href="tabsB.html"><span>Sec B</span></a>
     <a href="tabsC.html"><span>Sec C</span></a>
     <a href="tabsD.html"><span>Sec D</span></a>
     <a href="tabsE.html"><span>Sec E</span></a>
     <a href="tabsF.html"><span class="active">Sec F</span></a>
     <a href="tabsG.html"><span>Sec G</span></a>
     <a href="tabsH.html"><span>Sec H</span></a>
     <a href="tabsI.html"><span>Sec I</span></a>
     <a href="tabsJ.html"><span>Sec J</span></a>
     <a href="tabsK.html"><span>Sec K</span></a>
     <a href="tabsL.html"><span>Sec L</span></a>
     <a href="tabsM.html"><span>Sec M</span></a>
  </div

除了每个页面只有它自己的href属性显示为活动外，这是选项卡F的页面。有没有办法让此代码块在选中时仅在激活所选页面href属性时使用？

您可以在html块后或加载时运行此代码块：

---

假设需要在客户端应用活动类：

var currentPage = window.location.pathname.substring(1);
$('.tabs a').each(function(index, $tag){
  var link = $tag.attr('href');
  if(link === currentPage) {
    $('span', $tag).addClass('active');
  }
});

---

看看web组件：嗯，任何脚本语言。。。你也可以探索不同的HTML模板引擎。那里有很多。我个人使用的是OP-使用属性选择器，就像这样，可能比我的方法更干净。

var currentPage = window.location.pathname.substring(1);
$('.tabs a').each(function(index, $tag){
  var link = $tag.attr('href');
  if(link === currentPage) {
    $('span', $tag).addClass('active');
  }
});