点击按钮后重新排列 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

- Matt McManis

Answer 1

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

还要尝试避免内联javascript，并在此处使用data-attributes

步骤：

• 使用Array.from从可迭代对象y创建一个新的数组实例
• 使用addEventListener在所有按钮上添加点击事件
• 使用for循环隐藏所有包含tabSection类的元素，并从所有按钮中删除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

（说明：以上链接为it技术相关内容）

- Bhuwan

---

我会在我的项目中尝试它，我认为它会很好用。 - Matt McManis

Answer 2

这可以通过在OpenTab()中添加更多代码来实现。

首先，为了检查顶部行或底部行中的按钮是否被按下，您可以将类row1添加到第一行按钮中，将类row2添加到第二行中。然后，您可以通过将this作为附加参数传递给OpenTab()来检查哪个按钮被按下：onclick="OpenTab(this, 'General')。

通过对HTML进行这些更改，javascript可以更改以考虑所按下的按钮。在下面的代码中，每个if语句都检查当前按钮是否在特定行中elem.classList.contains("rowX")，并且该行是顶部行parent.firstElementChild.classList.contains("rowX")。然后，它遍历该行中选项卡的数量（选项卡数量可能会有所变化），并将它们放置在#sectionTabs div的开头。

function OpenTab(elem, tabName) { // Note that `elem` is where `this` is passed
    // Your original code
    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";

    // Additional code
    row1_elem = document.getElementsByClassName("row1"); // initially top row
    row2_elem = document.getElementsByClassName("row2"); // initially bottom row
    parent = document.getElementById("sectionTabs");

    // check that button in top row was clicked
    if (elem.classList.contains("row1") == 1 && parent.firstElementChild.classList.contains("row1") == 1) {

      // move elements from bottom row up
      for (var j = 0; j < row2_elem.length; j++) {
        parent.insertBefore(row2_elem[row2_elem.length-1], parent.firstChild);
      }

    // check that button in top row was clicked
    } else if (elem.classList.contains("row2") == 1 && parent.firstElementChild.classList.contains("row2") == 1) {

      // move elements from bottom row up
      for (var j = 0; j < row1_elem.length; j++) {
        parent.insertBefore(row1_elem[row1_elem.length-1], parent.firstChild);
      }

    }
}

一个 jsfiddle 也可用。

https://jsfiddle.net/o687eLyb/

请注意，您还可以将行包装到具有ID“rowX”的单独div中，并使用稍微不同的逻辑来检查哪一行被按下；然而，这个答案的好处在于它保持了HTML结构的完整性。

- vasilyrud