底部导航栏动画

Question

我想让当你点击一个图标时，它下面会出现一个特定的条带，这意味着这个人在这个页面上（类似这样）

目前，我的导航栏看起来像这样

这是我目前所拥有的 (HTML)：

let marker = document.querySelector('#marker');
let item = document.querySelectorAll('nav a .MuiSvgIcon-root');

function indicator(e) {
  marker.style.left = e.offsetLeft + "px";
  marker.style.width = e.offsetWidth + "px";

}
item.forEach(link => {
  link.addEventListener('click', (e) => {
    indicator(e.target)
  })
})

body {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #f2f2f2;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  border-top: 1px solid lightgray;
  z-index: 100;
}

.MuiSvgIcon-root {
  font-size: 35px;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);
   :hover {
    transform: translateY(-5px);
  }
}

#marker {
  position: absolute;
  height: 4px;
  width: 0;
  background: #000;
  bottom: 8px;
  left: 0;
  transition: 0.5s;
  border-radius: 4px;
}

<div id="marker"></div>

<HomeIcon/>

<TimelineIcon/>

<AccountCircleIcon/>

<ExploreIcon/>

.MuiSvgIcon-root 定义了所有图标。

Answer 1

你的js代码是正确的。你应该检查你的 HTML 和 CSS。因为它们的结构很重要