css tab 带指示器

泛酸桂花酒

已于 2024-06-04 11:13:45 修改

阅读量433

点赞数 8

文章标签： css 前端 javascript

于 2024-01-08 18:51:21 首次发布

本文链接：https://blog.youkuaiyun.com/xianfei9651/article/details/135464063

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <div class="marker"></div>
      <a target="_blank" class="item"> tab2 </a>
      <a target="_blank" class="item"> tab2 </a>
      <a target="_blank" class="item"> tab3 </a>
      <a target="_blank" class="item"> tab4 </a>
      <a target="_blank" class="item"> tab5 </a>
      <a target="_blank" class="item"> tab6 </a>
    </nav>
  </body>
  <script>
    const tabPanels = document.getElementsByClassName("item")
    const setMarker = (index) => {
      removeActive()
      tabPanels[index].classList.add("active")
      const marker = document.querySelector(".marker")
      const activeElement = document.querySelector(".active")
      if (!marker || !activeElement) return
      marker.style.left = activeElement.offsetLeft + "px"
      marker.style.width = activeElement.offsetWidth + "px"
    }
    
    const removeActive = () => {
      for (let i = 0; i < tabPanels.length; i++) {
        if (tabPanels[i].classList.contains("active")) {
          tabPanels[i].classList.remove("active")
        }
      }
    }
    
    for (let i = 0; i < tabPanels.length; i++) {
      tabPanels[i].addEventListener("click", (e) => {
        setMarker(i)
      })
    }

    setMarker(0)
  </script>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav {
    position: relative;
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 80px;
  }

  nav a {
    display: block;
    position: relative;
    font-size: 20px;
    margin-top: 26px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #000000;
    text-decoration: none;
    cursor: pointer;


  }

  nav .marker {
    left: 0;
    position: absolute;
    height: 4px;
    width: 0;
    background: #0085FC;
    bottom: 25px;
    border-radius: 4px;
    transition: 0.3s;
  }

  .active {
    font-size: 20px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #0085FC;
  }
  https://sandy-reminder-612.notion.site/vue3-Hook-eee079b92eff423c8313fd90e7f2f9ee