欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

選項卡按鈕下的活動選項卡指示線，它是如何移動的？

CSS
錢艷冰1年前7瀏覽0評論

以谷歌翻譯標簽按鈕為例，當我們點擊一種語言時，該語言下的藍線會從之前點擊的語言移動到當前點擊的語言。

在css中，我可以看到一個類被刪除/添加到活動/非活動標簽按鈕中，它控制按鈕內一段時間的不透明度，手動設置不透明度會使線條出現，但不會產生任何動畫效果。

同樣，如果我在包含該行的span上設置overflow:hidden，動畫將不再從上一個tab按鈕開始，但是我沒有看到js設置任何right或left，所以必須使用其他東西。

有人知道點擊標簽按鈕時這條線移動的秘密嗎？

我想你的意思是這樣的。

function moveLine(button) {
  var tabButtons = document.querySelectorAll('.tab-button');
  var line = document.querySelector('.line');

  // Remove 'active' class from all buttons
  tabButtons.forEach(function(tabButton) {
    tabButton.classList.remove('active');
  });

  // Add 'active' class to the clicked button
  button.classList.add('active');

  // Calculate the left position of the active button
  var activeButtonRect = button.getBoundingClientRect();
  var containerRect = button.parentNode.getBoundingClientRect();
  var offsetLeft = activeButtonRect.left - containerRect.left;

  // Apply the transform to move the line
  line.style.transform = 'translateX(' + offsetLeft + 'px)';
}

.tab-container {
  position: relative;
  display: flex;
}

.tab-button {
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.tab-button.active {
  opacity: 1;
}

.line {
  position: absolute;
  width: 100px;
  height: 3px;
  background-color: blue;
  transition: transform 0.3s;
}

body {
  background-color: aqua;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="tab-container">
    <button class="tab-button active" onclick="moveLine(this)">Button 1</button>
    <button class="tab-button" onclick="moveLine(this)">Button 2</button>
    <button class="tab-button" onclick="moveLine(this)">Button 3</button>
    <div class="line"></div>
  </div>
  <script src="app.js "></script>
</body>

</html>