导航栏状态处理

<nav role="navigation">
  <ul class="menu nav navbar-nav">
    <!-- 首页 -->
    <li class="first leaf" id="5001556">
      <a href="/" title="" class="">首页</a>
    </li>
    <!-- 走进中心 -->
    <li class="expanded dropdown" id="5001572">
      <a>走进中心 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="first leaf">
          <a href="/web/column/col5001573.html" title="">中心动态</a>
        </li>
        <li class="leaf">
          <a href="/web/column/col5001574.html" title="">通知公告</a>
        </li>
        <li class="last leaf">
          <a href="/web/column/col5001575.html">关于中心</a>
        </li>
      </ul>
    </li>
    <!-- 青少年活动 -->
    <li class="expanded dropdown" id="5001571">
      <a>青少年活动 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="first leaf">
          <a href="/web/column/col5001576.html" title="">青少年科技活动</a>
        </li>
        <li class="last leaf">
          <a href="/web/column/col5001577.html" title="">市科教工作者协会</a>
        </li>
      </ul>
    </li>
    <!-- 创新服务 -->
    <li class="expanded dropdown" id="5001570">
      <a>创新服务 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="first leaf">
          <a href="/web/column/col5001578.html" title="">知识产权服务</a>
        </li>
        <li class="last leaf">
          <a href="/web/column/col5001579.html" title="">技术合同认定登记</a>
        </li>
      </ul>
    </li>
    <!-- 学会服务 -->
    <li class="expanded dropdown" id="5001569">
      <a>学会服务 <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li class="first leaf">
          <a href="/web/column/col5001580.html" title="">学会学术服务</a>
        </li>
        <li class="leaf">
          <a href="/web/column/col5001581.html" title="">市科青联</a>
        </li>
        <li class="last leaf">
          <a href="/web/column/col5001582.html" title="">女科技工作者协会</a>
        </li>
      </ul>
    </li>
    <!-- 党的建设 -->
    <li class="last leaf">
      <a href="/web/column/col5001568.html" title="">党的建设</a>
    </li>
  </ul>
</nav>

处理方式，通过 js 来完成状态的逻辑，最后标记上 active

<hlx-template
  component-type="column"
  component-query-option="{}"
  component-variable="fixBugOnHeaderActiveUseColumn"
></hlx-template>

<script type="text/javascript" th:inline="javascript">
  // 处理原站 nav 中 active 状态的问题
  window.addEventListener("DOMContentLoaded", function   () {

      var columuInfo = /*[[${fixBugOnHeaderActiveUseColumn}]]*/ ;

      // 用于处理导航 active 状态
      // 特定栏目下，状态栏应该是 active
      var fix_bug_on_header_active_on_hlx = {
          // 首页
          5001556:[],

          // 走进中心
          5001572:[5001573,5001574,5001575],

          // 青少年活动
          5001571:[5001576,5001577],

          // 创新服务
          5001570:[5001578,5001579],

          // 学会服务
          5001569:[5001580,5001581,5001582],

          // 党的建设
          5001568:[]
      }

      if(!columuInfo)return;

      var currentColumnId = columuInfo.id;

      console.log('currentColumnId > ', currentColumnId);

      for(var key in fix_bug_on_header_active_on_hlx){
          console.log(key , '===', currentColumnId , '==>', key === currentColumnId);
          if(key === currentColumnId){
              // 当前栏目
              setActive(key);
              return;
          }

          // 子栏目
          var subColumnList = fix_bug_on_header_active_on_hlx[key];

          for(var i=0;i<subColumnList.length;i++){
              console.log(key,' > ', subColumnList[i]  , '===', currentColumnId , '==>', subColumnList[i] === currentColumnId);
              if(subColumnList[i] === currentColumnId){
                  setActive(key);
                  return;
              }
          }
      }


      function setActive(columnId){
        document.getElementById(columnId).classList.add('active');
      }

  });
</script>