Question

我正在尝试实现一些选项卡，当我们从一个更改为另一个时，它们之间会逐渐消失。我正在使用的这段代码有效，但是有一个问题。当我从下一个选项卡转到上一个选项卡时，有一个小故障，我可以看到淡入淡出之前最后一个选项卡的更改状态，持续一秒钟。

HTML：

function openSvc(evt, svc) {
  var i, x, tablinks, opacitys;
  x = document.getElementsByClassName("svc");
  for (i = 0; i < x.length; i++) {
    x[i].classList.remove('display-yes');
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(svc).classList.add('display-yes');
  evt.currentTarget.className += " active";
}

.svc {
  opacity: 0;
  position: absolute;
  transition: .3s;
}

.display-yes {
  opacity: 1;
  position: relative;
}

<div class="tab">
  <button class="tablink" onclick="openSvc(event,'dev')"> Desenvolvimento de software </button>
  <button class="tablink active" onclick="openSvc(event,'it')"> Infraestruturas IT </button>
  <button class="tablink" onclick="openSvc(event,'design')"> UX / UI Design </button>
  <button class="tablink" onclick="openSvc(event,'consult')"> Consultoria </button>
</div>

<div id="dev" class="svc display-yes">
  <p>lorem ipsum1

</div>

<div id="it" class="svc">
  <p>lorem ipsum2
</div>
<div id="design" class="svc">
  <p>lorem ipsum3

</div>

<div id="consult" class="svc">
  <p>lorem ipsum4

</div>

示例：https://jsfiddle.net/4fz01c2o/

在此先感谢您的帮助！

Answer 1

我不确定您要在这里寻找什么效果。 G-Cyrillus的解决方案有效，但似乎您会失去一些淡入淡出效果。

因此，要保持这种效果，您需要删除应用于position: relative的{{1}}规则。

它弄乱了div的位置。为此，您需要添加一个.display-yes容器以将position: relative; div保留在适当的位置。

.svc

function openSvc(evt, svc) {
  var i, x, tablinks, opacitys;
  x = document.getElementsByClassName("svc");
  for (i = 0; i < x.length; i++) {
    x[i].classList.remove('display-yes');
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(svc).classList.add('display-yes');
  evt.currentTarget.className += " active";
}

.svc-container {
  position: relative;
  width: 500px;
  height: 200px;
  margin-top: 1rem;
  background-color: lightblue;
}

.svc {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: .3s;
}

.svc p {
  margin: 0; /* To be consistent with the next block*/
}

.display-yes {
  opacity: 1;
}

.tablink {
  background-color: blue;
}

.active {
  background-color: red;
}

Answer 2

您有不同的问题：对隐藏元素使用绝对位置将始终导致显示问题我建议使用具有全局大小（和颜色）的父div，并且其中的每个选项卡都在内部相同的绝对位置上。

您的问题尚不清楚，我想您希望在开始下一个选项卡的淡入之前等待淡出结束。
因此您需要使用transitionend事件来检测淡出效果

我还建议借助data information属性为所有选项卡按钮使用事件委托，这将使html代码更可靠，而JS代码更少

因此，此代码：（转换= 1秒进行测试）

const tabButtons = document.querySelector('div.tab')
  ,   buttonTabs = document.querySelectorAll('div.tab > button.tablink')
  ,   tabData    = [...document.querySelectorAll('div.svc')].reduce((res,eTab)=>
        {
        res.push( { id:eTab.id, disp:eTab.classList.contains('display-yes'), elm: eTab} )
        return res
        },[])

tabButtons.onclick =e=>
  {
  if (!e.target.matches('button.tablink'))   return // ignore others clicks outsides 

  let currentTab = tabData.find(tb=>tb.disp)
    , newTab     = tabData.find(tb=>tb.id===e.target.dataset.tabId)   

  if (newTab.id != currentTab.id )
    {
    currentTab.elm.addEventListener('transitionend',setNewTab)
    currentTab.elm.classList.remove('display-yes')
    currentTab.disp = false

    buttonTabs.forEach(bt=>bt.classList.remove('active'))
    e.target.classList.add('active')
    }
  function setNewTab()
    {
    currentTab.elm.removeEventListener('transitionend',setNewTab)
    newTab.elm.classList.add('display-yes')
    newTab.disp = true
    }
  }

#all-svc {
  position:relative;
  width:500px; 
  height:200px;
  background-color:#00488ab5;
  margin-top: 1em;
  }
.svc{
  opacity:0;
  transition: opacity 1s;
  position:absolute;
  top: 0;
  left:0;
  padding: 0 0.5em;
  }
.display-yes{
  opacity:1;
  }
.tablink{
  background-color:#0000ffb5;
  }
.active{
  background-color:#ff0000b5;  
  }

<div class="tab">
  <button class="tablink active" data-tab-id="dev"> Desenvolvimento de software </button> 
  <button class="tablink" data-tab-id="it"> Infraestruturas IT </button> 
  <button class="tablink" data-tab-id="design"> UX / UI Design </button> 
  <button class="tablink" data-tab-id="consult"> Consultoria </button> 
</div>

<div id="all-svc">
  <div id="dev" class="svc display-yes">
    <p>lorem ipsum 1</p>
  </div>
  <div id="it" class="svc">
    <p>lorem ipsum 2 lorem ipsum 2</p>
  </div>
  <div id="design" class="svc">
    <p>lorem ipsum 3 ipsum 3 lorem 3</p>
  </div>
  <div id="consult" class="svc">
    <p>lorem ipsum 4 lorem ipsum ipsum ipsum 4</p>
  </div>
</div>

<div style="width:500px; height:200px; background-color:#c2c2c2;">
  <p> 
  lorem ipsum lorem ipsum
  </p>
</div>

具有淡入淡出效果的Javascript / CSS标签

2 个答案: