javascript - 单击按钮时重新排列 HTML 焦点选项卡的行

Question

我正在将程序从 XAML/C# 移植到 HTML/CSS/JavaScript。

我有带标签的部分，点击时将焦点标签的行重新排列到底部。这是由 XAML 中的 TabControl 自动执行的。

---

XAML/C#

一般关注

以视频为中心

---

HTML/CSS/JavaScript

我怎样才能用 JavaScript 做同样的事情？

我正在使用这个脚本 https://www.w3schools.com/w3css/w3css_tabulators.asp

// Display Tab Section

function OpenTab(tabName) {
  var i;
  var x = document.getElementsByClassName("tabSection");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";
}

.btnTab {
  width: 33.33%;
  display: block;
  float: left;
  background: #020f31;
  color: #fff;
  padding: 0.2em;
  border-top: 1px solid #0080cb;
  border-right: 1px solid #0080cb;
  border-bottom: none;
  border-left: 1px solid #0080cb;
  cursor: pointer;
}

<!-- Tabs -->
<div id="sectionTabs">
  <button class="btnTab" onclick="OpenTab('General')">General</button>
  <button class="btnTab" onclick="OpenTab('Stream')">Stream</button>
  <button class="btnTab" onclick="OpenTab('Display')">Display</button>
  <button class="btnTab" onclick="OpenTab('Video')">Video</button>
  <button class="btnTab" onclick="OpenTab('Audio')">Audio</button>
  <button class="btnTab" onclick="OpenTab('Subtitles')">Subtitles</button>
</div>

<!-- Sections -->
<div id="General" class="tabSection">
  General ...
</div>
<div id="Stream" class="tabSection" style="display:none">
  Stream ...
</div>
<div id="Display" class="tabSection" style="display:none">
  Display ...
</div>
<div id="Video" class="tabSection" style="display:none">
  Video ...
</div>
<div id="Audio" class="tabSection" style="display:none">
  Audio ...
</div>
<div id="Subtitles" class="tabSection" style="display:none">
  Subtitles ...
</div>

Fiddle Link

Answer 1

好吧，如果您可以稍微更改标记，例如将按钮的第一行和第二行包装在不同的 div 上...

同时尽量避免内联 javascript 并在此处使用 data-attributes

步骤:

• 从可迭代对象 y usinf Array.from
创建一个新的数组实例
• 使用 addEventListener 在所有按钮上添加点击事件
• 隐藏所有包含 tabSection 类的元素，并使用 for 循环从所有按钮中删除 active 类。
• 从点击的按钮中获取data-tab值并将display:block设置为受尊重的选项卡并将active类添加到当前按钮。
• 现在要上下切换 .first 和 .second div，请在 if 条件下使用 insertBefore比较点击按钮的索引

var x = document.getElementsByClassName("tabSection");
var y = document.getElementsByClassName("btnTab");;
var a = document.querySelector(".first");
var b = document.querySelector(".second")
var p = document.getElementById("sectionTabs");
Array.from(y).forEach(function(elem, index) {
  elem.addEventListener("click", function() {
    for (var i = 0; i < x.length; i++) {
      x[i].style.display = "none";
      y[i].classList.remove("active");
    }
    var tab = this.getAttribute("data-tab");
    document.getElementById(tab).style.display = "block";
    this.classList.add("active");
    if (index < 3) {
      p.insertBefore(b, p.childNodes[0])
    } else {
      p.insertBefore(a, p.childNodes[0])
    }
  })
})

.btnTab {
  width: 33.33%;
  display: block;
  float: left;
  background: #020f31;
  color: #fff;
  padding: 0.2em;
  border-top: 1px solid #0080cb;
  border-right: 1px solid #0080cb;
  border-bottom: none;
  border-left: 1px solid #0080cb;
  cursor: pointer;
  outline: none;
}

.btnTab.active {
  background: red;
}

<!-- Tabs -->
<div id="sectionTabs">
  <div class="first">
    <button class="btnTab" data-tab="General">General</button>
    <button class="btnTab" data-tab="Stream">Stream</button>
    <button class="btnTab" data-tab="Display">Display</button>
  </div>
  <div class="second">
    <button class="btnTab active" data-tab="Video">Video</button>
    <button class="btnTab" data-tab="Audio">Audio</button>
    <button class="btnTab" data-tab="Subtitles">Subtitles</button>
  </div>
</div>

<!-- Sections -->
<div id="General" class="tabSection" style="display:none">
  General ...
</div>
<div id="Stream" class="tabSection" style="display:none">
  Stream ...
</div>
<div id="Display" class="tabSection" style="display:none">
  Display ...
</div>
<div id="Video" class="tabSection">
  Video ...
</div>
<div id="Audio" class="tabSection" style="display:none">
  Audio ...
</div>
<div id="Subtitles" class="tabSection" style="display:none">
  Subtitles ...
</div>

引用链接:

• Array.from
• forEach()
• element.addEventListener
• element.classList
• element.style
• node.insertBefore