typecho博客系统导航栏选中高亮

效果如下：

实现代码：

// index.js
// console.log(window.location.pathname)
const url = window.location.pathname.split('/');
let nowUrl
if(window.location.pathname === '/') {
    nowUrl = 'home';
} else {
    nowUrl = url[2].split('.')[0];
}
// console.log(nowUrl);

const navLinks = document.querySelectorAll('.navigation_link');
const linkArray = Array.from(navLinks).map(link => {
  const href = link.getAttribute('href');
  const hrefArray = href.split('/');
  return hrefArray[4] ? hrefArray[4].split('.')[0] : 'home';
});

// console.log(linkArray)

linkArray.forEach((item,index) => {
    if(item === nowUrl) {
        // console.log(index)
        navLinks[index].classList.add('navigation_active')
    }
})

css部分

.navigation_active {
    font-weight: bold;
    position: relative;
}
.navigation_active::after {
    content: '';
    width: 100%;
    position: absolute;
    height: 8px;
    bottom: 0;
    right: 0;
    background-color: rgba(150, 150, 150, 0.4);
    /*animation: jump ease 0.5s, blink 3s linear infinite;*/
    animation: jump ease 0.5s;
}

这里主要是通过获取导航栏中所有a标签的链接，然后拿当前浏览器打开路径去遍历比对，然后为匹配的a标签添加上一个navigation_active的类名实现选中高亮