请实现类似于欧莱雅官网头部tab下划线切换的效果，默认没有点击的时候下划线不显示，点击了其中的标签之后，对应标签的下划线直接显示在标签下面，不需要位移，再次点击其他标签的时候，下划线位移到指定标签的下面

可以使用HTML、CSS和JavaScript实现欧莱雅官网头部tab下划线切换的效果。以下是一个简单的实现示例：

HTML部分：

<div class="tabs">
  <div class="tab" id="tab1" onclick="showTab('tab1')">标签1</div>
  <div class="tab" id="tab2" onclick="showTab('tab2')">标签2</div>
  <div class="tab" id="tab3" onclick="showTab('tab3')">标签3</div>
  <div class="underline"></div>
</div>

CSS部分：

.tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.tab {
  cursor: pointer;
}

.underline {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: #f00;
  transition: all 0.3s ease-out;
  display: none;
}

JavaScript部分：

function showTab(tabId) {
  // 隐藏所有下划线
  var underlines = document.getElementsByClassName("underline");
  for (var i = 0; i < underlines.length; i++) {
    underlines[i].style.display = "none";
  }
  // 显示当前下划线
  var tab = document.getElementById(tabId);
  var underline = tab.getElementsByClassName("underline")[0];
  underline.style.display = "block";
  // 移动下划线位置
  var tabs = document.getElementsByClassName("tab");
  var index = Array.prototype.indexOf.call(tabs, tab);
  var width = tab.offsetWidth;
  var left = tab.offsetLeft;
  underline.style.width = width + "px";
  underline.style.transform = "translateX(" + left + "px)";
}

在上述代码中，我们首先定义了一个包含所有标签和下划线的容器“tabs”，以及每个标签和对应的下划线。默认情况下，所有下划线的display属性均为none，因此不会显示在页面上。

当用户点击某个标签时，showTab函数会被调用。该函数首先将所有下划线隐藏，然后根据传入的标签ID显示对应的下划线。同时，该函数还会重新计算并设置下划线的宽度和位置，以便让下划线显示在正确的标签下面。

需要注意的是，上述代码中使用了ES5的Array.prototype.indexOf方法获取了当前标签在数组中的索引，因此在IE8及以下版本的浏览器中可能无法正常运行。如果需要支持这些浏览器，可以使用其他方式获取当前标签的索引。