Question

我正在使用此导航栏。每当单击选项卡时，导航栏就会更改为其他颜色，但这导致了一个问题：单击图标时，导航栏会更改颜色，但选项卡的徽标会消失。仅当我单击另一个选项卡时，它才会重新出现，该选项卡也会消失...换句话说，单击并处于活动状态时，选项卡消失。我找不到这种情况，这是我的新手，所以如果有人有时间，任何提示都将不胜感激。

非常感谢

HTML：

<!--Header-->
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css'>

      <link rel="stylesheet" href="css/style.css">
<!--End Header-->

</head>

<body>

<!--Header-->
<div class="tab-nav-container">

    <div class="tab active purple">
        <i class="fas fa-home"></i>
    </div>
    <div class="tab pink">
      <i class="far fa-code"></i>
    </div>
    <div class="tab teal">
        <i class="far fa-user"></i>
    </div>
    <div class="tab yellow">
        <i class="fas fa-search"></i>
    </div>
    <div class="tab yellow">
        <i class="far fa-at"></i>
    </div>

</div>

    <script  src="js/index.js"></script>
<!--End Header-->

CSS：

    box-sizing: border-box;
}

body {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: background 0.4s linear;

    text-align: center;

}

.tab-nav-container {
    background-color: #fff;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    display: flex;
    justify-content: space-between;
    padding: 30px;
    width: 500px;
}

.tab {
    background-color: transparent;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0px;
    margin: 0 0px;
    transition: tab-nav-container 0.4s linear;
}

.tab i {
    font-size: 1.2em;
}

.tab p {
    font-weight: bold;
    overflow: hidden;
    max-width: 0;
}

.tab.active p {
    margin-left: 0px;
    max-width: 300px;
    transition: max-width 0.1s linear;
}

.tab.active.purple {
    background-color: rgba(91, 55, 183, 0.2);
    color: rgba(91, 55, 183, 1);
}

.tab.active.pink {
    background-color: rgba(201, 55, 157, 0.2);
    color: rgba(201, 55, 157, 1);
}

.tab.active.yellow {
    background-color: rgba(230, 169, 25, 0.2);
    color: rgba(230, 169, 25, 1);
}

.tab.active.teal {
    background-color: rgba(28, 150, 162, 0.2);
    color: rgba(28, 150, 162, 1);
}

@media (max-width: 450px) {
    .tab-nav-container {
        padding: 20px;
        width: 350px;
    }

    .tab {
        padding: 0 10px;
        margin: 0;
    }

    .tab i {
        font-size: 1em;
    }
}

JS：

const tabs = document.querySelectorAll('.tab');

tabs.forEach(clickedTab => {
    // Add onClick event listener on each tab
    clickedTab.addEventListener('click', () => {
        // Remove the active class from all the tabs (this acts as a "hard" reset)
          tabs.forEach(tab => {
            tab.classList.remove('active');
        });

        // Add the active class on the clicked tab
        clickedTab.classList.add('active');
        const clickedTabBGColor = getComputedStyle(clickedTab).getPropertyValue('color');
        console.log(clickedTabBGColor);
        banner.style.backgroundColor = clickedTabBGColor;
    });
});

Answer 1

我更改了一些CSS属性，并且我认为它可以正常工作：

编辑：确保FontAwesome类正确，我使用了其他一些图标。

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition:  0.4s linear;
  text-align: center;
}

.tab-nav-container {
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  display: flex;
  justify-content: space-between;
  padding: 30px;
  width: 500px;
}

.tab {
  background-color: transparent;
  border-radius: 50px;
  cursor: pointer;
  display: flex;  
  transition: tab-nav-container 0.4s linear;
}

.tab i {
  font-size: 2.2em;
}

.tab p {
  font-weight: bold;
}

.tab.active p {
  transition: max-width 0.1s linear;
}

.tab.active.purple {
  background-color: rgba(91, 55, 183, 0.2);
  color: rgba(91, 55, 183, 1);
}

.tab.active.pink {
  background-color: rgba(201, 55, 157, 0.2);
  color: rgba(201, 55, 157, 1);
}

.tab.active.yellow {
  background-color: rgba(230, 169, 25, 0.2);
  color: rgba(230, 169, 25, 1);
}

.tab.active.teal {
  background-color: rgba(28, 150, 162, 0.2);
  color: rgba(28, 150, 162, 1);
}

@media (max-width: 450px) {
  .tab-nav-container {
      padding: 20px;
      width: 350px;
  }

  .tab {
      padding: 0 10px;
      margin: 0;
  }

  .tab i {
      font-size: 1em;
  }
}

Answer 2

谢谢。我得到了需要修复的提示。 @Randy Casburn由于我的经验有限，所以我并不总是清楚地看到这些小事情。 @pawnonfire是的，我知道我是从布局开始的。 @EshgheCode非常感谢

导航栏：当我单击它们时，选项卡图标消失

2 个答案: