我有一连串的页面,每个页面都包含此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属性而被使用?

最佳答案

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

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

关于javascript - 如何将DRY应用于一系列具有几乎相同的<div> </div>块的HTML文件?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30019786/

10-09 23:26