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

Question

我有一系列页面，每个页面都包含此 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 属性时使用？

Answer 1

假设您需要在客户端应用事件类:

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');
  }
});