javascript - 导航栏 : Tab icons disapear when I click on them-6ren

javascript - 导航栏 : Tab icons disapear when I click on them

转载作者：太空宇宙更新时间：2023-11-04 06:10:35

24

4

我正在处理这个导航栏。每当我单击选项卡时，我都会将导航栏更改为不同的颜色，但这导致了一个问题:当我单击一个图标时，导航栏会更改颜色但选项卡的 Logo 会消失。它仅在我单击另一个选项卡时才会重新出现，该选项卡也会消失……换句话说，选项卡在单击并处于事件状态时消失。我找不到这是怎么发生的，我对此很陌生，所以如果有人有空的话，任何提示都将不胜感激。

非常感谢

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;
    });
});

最佳答案

我更改了一些 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;
  }
}

关于javascript - 导航栏 : Tab icons disapear when I click on them，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56466162/

24

4

0

文章推荐： c - 这个FFT函数的输出有什么意义呢？

文章推荐： CSS 选择器以所有不是类名后代的元素为目标？

文章推荐： c - 如何验证实数

文章推荐： c - "ans += n << count"是什么意思？

jquery - .on ('click' ) 和 .off ('click' ).on ('click' ) 之间的区别
将 .off 与 .click 结合使用有何用途或区别？ $('#link').off('click').on('click',function(){}); 对比 $('#link').on('cli
javascript - JQuery/DOM元素 "click"事件注册: on ("click") VS click() VS addeventlistener ("click")
我正在学习 javascript，并且我见过不止一种注册点击事件的方法: $(DOMelement).click(function() {}); $(DOMelement).on('click',fu
jQuery .on ('click' ) 与 .click() 和 .delegate ('click' )
我习惯使用.click()和delegate('click') ，所以当我读到这两个在 jQuery 的最新版本中都被弃用时，我想我应该读一下它，但我有点摸不着头脑。文档 here似乎表明这是 .l
jquery - $(sel).bind ("click"、 $(sel).click(、 $(sel).live ("click"、 $(sel).on ("click"之间有什么显着差异？
我已经使用它们很长一段时间了，但大多数时候，我更喜欢较短的，但是，我只是想真正深入了解本质细节。我可能一直在创建有错误的代码，并且我不想在网络上贡献和传播懒惰完成的代码。所以，告诉我: What a
javascript - 有没有办法实现 "click"、 "double click"和 "click and hold"来处理同一元素？
我想实现类似在 Android 上点击 Instagram 中的帖子的功能(我认为在 iOS 上应该是相同的功能)。在 Instagram 中，如果有人点击照片，它会打开，双击，它会被喜欢，然后单击并
click - jquery click 事件只运行一次
我的点击事件有问题。它运行 1 次。示例: 我有 3 页(1 2 3)。当我点击 2 时它起作用了。然后在第 3 页，它又可以工作了。但我再次点击 2 不起作用。该事件未触发。 $("div .top
javascript - .off ('click' ) - 但我想再次返回 'click'
我正在尝试这样做。在 jsfiddle 中:http://jsfiddle.net/QGGhW/2/ 但是在我点击 not now 之后，下一个文本输入就不再可点击了。我该怎么做？是否有类似 .on
jquery .live ('click' ) 与 .click()
我想知道是否有任何情况下使用 .click(function {...}); 而不是 .live('click', function { ...});? 据我所知，实时选项似乎是一个更好的选择，因此我
javascript - .click() 在嵌套在 .click() 元素内部的元素上
我正在尝试在 Accordion 内部创建一个 Accordion ......并且我有点挣扎。本质上，我有一个 div .applicant，单击它会添加一个 .expand 类，它将高度设置为
jquery .on ("click")在 .off ("click")之后不起作用
我可以使用一些帮助来调试这个: var factBody = jQuery(".fact__body"); jQuery(".fact").on("click", function() { j
jQuery if click 包含 clicked 类
如果我有一个用于 clicked 类的监听器，以及另一个用于 click-option-1、click-option-2 类的监听器，以及click-option-3，如何在我的 clicked 事件
jquery - .on ('click' ) 与 .click() 之间的区别
下面的代码有什么区别吗？ $('#whatever').on('click', function() { /* your code here */ }); 和 $('#whatever').
jquery - .on ('click' ) VS 'selector.click
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 9 年前。 Improv
javascript - jQuery on(click)/click 事件未触发
我不擅长 UI 设计，所以我使用 bootstrap 和 jquery 来帮助我一点。我正在尝试将 jQuery 事件绑定(bind)到导航栏，因此当用户单击导航栏上的 p 标签时，它应该触发单击事件
jquery - click() 函数中的 click() 函数不起作用
问题是，当我单击 delaccbut 按钮时，单击功能起作用并显示消息，但是当我单击 confdel 或 redel 按钮来自 click 函数，它不...为什么？ HTML: Delete my
javascript - jQuery .click()/.on ("click"...) 我需要帮助在交替点击时交换文本
我想要完成的是“类似”的东西 $("button .toggleExcerpt) .toggle( function FIRST() { do first function..
javascript - click() 中的函数在设置元素的 click 方法后执行
function show1(){ $("#btn").click(show2()); window.alert(
javascript - .click/.on ('click' 内的 IF 语句不起作用
我不明白为什么这不起作用。当我单击具有该类名的复选框时，clickId 被赋予值access-toggle-all，所以这没有意义(至少对我来说).. $(document).ready(functi
javascript - 如何在触发另一个 click() 时清除 click()？
我有一个关于 click() 的复杂问题。我有 4 个按钮，分别命名为功能 1、功能 2、方法 1 和方法 2。 Function 1 Function 2 Method 1 Method 2 当单
javascript - this.click() 和 $(this).click() 有什么区别？
最后，我认为这不是我特别需要解决的问题，但我不明白为什么会这样，这让我很困扰。基本上，我有一些复选框，我只希望用户能够选择其中的一定数量。我正在使用下面的代码来实现该效果。 $j( function

首页

博学

6Ren·AI

商城

javascript - 导航栏 : Tab icons disapear when I click on them