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和insertBefore div使用if来比较点击按钮的索引

＆＃13;

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])
    }
  })
})

＆＃13;

.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;
}

＆＃13;

<!-- 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>

＆＃13;

参考链接：

Answer 2

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

首先，要检查顶行或底行中的按钮是否被按下，您可以将类row1添加到第一行按钮，将row2添加到第二行。然后，您可以通过传递OpenTab()作为附加参数来检查this中按下了哪个按钮：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结构相同。

按钮单击后重新排列HTML聚焦选项卡的行

2 个答案: