顶部导航栏选中状态

借助 hlx selfPosition 获取路径栏目 id ，并根据 id 来设置导航栏选中状态

navigationSetActive

const defaultColumnIdMap = [
  // 首页
  // 5007797, // 需要排除掉首页

  // 馆务
  5007799,

  //资讯
  5007804,

  //服务
  5007809,

  //文化
  5007816,

  //法规
  5007817,
];

function getNavigationItem(columnId: number) {
  return document.getElementById(`nav${columnId}`);
}

export function setNavigationActiveByList(
  checkColumnId: number | number[],
  columnIdMaps: number[] = defaultColumnIdMap
) {
  const checkColumnIdList = Array.isArray(checkColumnId)
    ? checkColumnId
    : [checkColumnId];

  for (const columnId of checkColumnIdList) {
    const isInclude = columnIdMaps.includes(columnId);

    if (isInclude) {
      setNavigationActive(columnId);

      return;
    }
  }
}

export function setNavigationActive(columnId: number) {
  const navItem = getNavigationItem(columnId);
  if (navItem) {
    navItem.classList.add("active");
  }
}

使用示例

<hlx-template
  component-type="selfPosition"
  component-query-option="{'showMedium':'PC'}"
  component-variable="selfPosition"
></hlx-template>

<div class="hlx-breadcrumbs">
  <span style="flex-shrink: 0; -ms-flex-shrink: 0;">当前位置：</span>

  <th:block th:each="item,stat : ${selfPosition}">
    <a class="breadcrumb-item" th:href="${item.urlPc}" th:text="${item.name}"
      >___</a
    >
    <span class="separator">></span>

    <span th:if="${stat.last}" class="breadcrumb-item">详情</span>
  </th:block>
</div>

<script type="text/javascript" th:inline="javascript">
  window.addEventListener("DOMContentLoaded", function () {

    var columnList = [
       /*[# th:each="item, stat : ${selfPosition}"]*/
       [[${item.id}]],
       /*[/]*/
    ]

    if (!columnList) return;

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

     setNavigationActiveByList(columnList);
  });
</script>