javascript - 如何通过手机改善网站选项卡之间的交易

Question

我写了this基本网站，但手机浏览器的选项卡之间的转换似乎很缓慢。 (另一方面，同一页面在我的桌面上运行得足够好)。我可以做些什么来改善这一点？

脚本:

function showPanel(panelIndex, colorCode) {
    tabButtons.forEach(function (node) {
        node.style.backgroundColor = "";
        node.style.color = "";
    });

    tabButtons[panelIndex].style.backgroundColor = colorCode;
    tabButtons[panelIndex].style.color = "white";

    tabPanels.forEach(function (node) {
        node.style.display = "none";
    });
    tabPanels[panelIndex].style.display = "block";
    tabPanels[panelIndex].style.backgroundColor = colorCode;
}

Answer 1

您可以重构代码来保存当前按钮实例，而不是循环两次。两个 forEach 代码太多了。

var tabButtons = document.querySelectorAll(".tabContainer .buttonContainer button");
var tabPanels = document.querySelectorAll(".tabContainer .tabPanel");

var lastPanel, lastButton;

function showPanel(currentButton, colorCode, panelIndex) {
  if (lastButton) {
    lastButton.style.backgroundColor = "";
    lastButton.style.color = "";
  }

  lastButton = currentButton;
  lastButton.style.backgroundColor = colorCode;
  lastButton.style.color = "white";

  if (lastPanel) {
    lastPanel.style.display = "none";
  }
  lastPanel = tabPanels[panelIndex];
  lastPanel.style.display = "block";
  lastPanel.style.backgroundColor = colorCode;
}

showPanel(tabButtons[0], 'red', 0);

.title {
  font-family: sans-serif;
  color: blueviolet;
  text-align: center;
}

.tabContainer {
  width: 100%;
  height: 350px;
}

.tabContainer .buttonContainer {
  height: 15%;
}

.tabContainer .buttonContainer button {
  width: 33.33%;
  height: 100%;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px;
  font-family: sans-serif;
  font-size: 15px;
  background-color: bisque;
}

.tabContainer .buttonContainer button:hover {
  background-color: rosybrown;
}

.tabContainer .tabPanel {
  height: 85%;
  background-color: aquamarine;
  color: black;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 22px;
  display: none;
}

.dataContainer {
  font-size: 40px;
  height: 85%;
  width: 100%;
  text-align: center;
  background: Silver;
  box-sizing: border-box;
  font-family: sans-serif;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.calculateHFOV .input {
  margin: 10px;
  padding: 10px;
  background: LightSkyBlue;
}

.calculateFocalLength .input {
  margin: 10px;
  padding: 10px;
  background: lemonchiffon;
}

.fov {
  padding: 10px;
  margin: 10px;
  background: LightSalmon;
}

.natoTarget {
  margin: 10px;
  padding: 10px;
  background: PaleTurquoise;
}

.humanTarget {
  margin: 10px;
  padding: 10px;
  background: LightPink;
}

.objectTarget {
  margin: 10px;
  padding: 10px;
  background: PaleGreen;
}

.settings .parameters {
  margin: 10px;
  padding: 10px;
  background: PaleTurquoise;
}

.settings .linePairs {
  margin: 10px;
  padding: 10px;
  background: LightPink;
}

.settings .targetSize {
  margin: 10px;
  padding: 10px;
  background: PaleGreen;
}

<div class="tabContainer">
  <div class="buttonContainer">
    <button onclick="showPanel(this,'red', 0)" style="">Calculate HFOV</button>
    <button onclick="showPanel(this,'green', 1)" style="">Calculate Focal Length</button>
    <button onclick="showPanel(this,'yellow', 2)">Settings</button>
  </div>

  <div class="tabPanel" style="display: none; background-color: red;">
    <div class="calculateHFOV">
      <div class="dataContainer">
        <div class="input">input</div>
        <div class="fov">fov</div>
        <div class="natoTarget">natoTarget</div>
        <div class="humanTarget">humanTarget</div>
        <div class="objectTarget">objectTarget</div>
      </div>
    </div>

  </div>
  <div class="tabPanel" style="display: none; background-color: green;">
    <div class="calculateFocalLength">
      <div class="dataContainer">
        <div class="input">input</div>
        <div class="fov">fov</div>
        <div class="natoTarget">natoTarget</div>
        <div class="humanTarget">humanTarget</div>
        <div class="objectTarget">objectTarget</div>
      </div>
    </div>
  </div>
  <div class="tabPanel" style="display: block; background-color: yellow;">
    <div class="settings">
      <div class="dataContainer">
        <div class="parameters">parameters</div>
        <div class="linePairs">linePairs</div>
        <div class="targetSize">targetSize</div>
      </div>
    </div>
  </div>
</div>