寻求一种html头部公共调用解决方案

首先我用的是Thinkphp，模板之间可以继承，但是在弄头部导航栏的时候遇到了麻烦
我是用开源的amazeUI框架，和bootstrap差不多
在弄导航栏的时候有一个class="active"的选项
能实现下面这个效果（加上了阴影告诉用户当前处于哪个页面）
接下来问题来了

我弄了一个head.html用于公共调用，这样可以免去重复代码，但是每个新页面加class="active"的位置不同，意味着这样调用不行，问大家有没有什么解决方案
thinkphp php js 随你们

<header>
      <ul class="am-nav am-nav-pills am-topbar-nav">
              <li><a href="#}">首页</a></li>
              <li><a href="#}">答案分类</a></li>
       </ul>
</header>

---

两种方式:
1.前端js根据当前的地址来给相应的li添加class。

2.head虽然是公用的模板，但是是动态生成，比如你通过注入变量让head的内容得以根据需要生成

---

header.php:

<header>
      <ul class="am-nav am-nav-pills am-topbar-nav">
              <li><a href="#"<?=$active['index'];?>>首页</a></li>
              <li><a href="#"<?=$active['qa'];?>>答案分类</a></li>
       </ul>
</header>

index.php:

<?php
   $active =  array(
      'index' => ' class="active"',
   );
   include 'header.php';
?>

qa.php :

<?php
   $active =  array(
      'qa' => ' class="active"',
   );
   include 'header.php';
?>

---

在每个页面中使用JS来控制哪个链接高亮