Q:

How to improve the transactions between tabs in website from the phone

I wrote this basic website, but the transition between the tabs from the browser of the phone seems sluggish. (On the other hand, the same page works good enough on my desktop).
What can I do in order to improve this?
Script:
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;
}

A:

Rather than looping two times, you can refactor your code to save the current button instance. Two forEach is too much code.

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>

