菜單切換功能無法正常工作

Question

除了第一次調用tab_toggle（0）之外，此方法在任何時候都可以正常工作。
首次調用此功能時，#box_home具有display:block; 因此該功能不應該執行任何操作，而是#box_port （下一個div）正在顯示：block; 和#box_home剩余的display:block像以前一樣。 為什么會這樣。 是因為調用該函數時，變量的值不確定，所以做了一些隨機的事情。 請僅使用javascript回答此問題，不要在jquery中回答。 我無法使其僅在jsfiddle中起作用，所以我要共享整個網頁代碼http://goo.gl/dhTUDH

<!-- Javascript -->
<script>
function tab_toggle(x) {
    console.log("tab_toggle");
    var home    = document.getElementById("box_home").style;
    var port    = document.getElementById("box_port").style;
    var about   = document.getElementById("box_about").style;
    var contact = document.getElementById("box_contact").style;
    var box     = [home,port,about,contact];

switch (x) {
    case 0:
        if (home.display == "block") {
            console.log('end');
        } else if (port.display == "block") {
            box[0].display = "block";
            box[1].display = "none";
        } else if (about.display == "block") {
            box[1].display = "block";
            box[2].display = "none";
        } else {
            box[2].display = "block";
            box[3].display = "none";
        }
        break;
    default: 
        if (home.display == "block") {
            box[0].display = "none";
            box[1].display = "block";
        } else if (port.display == "block") {
            box[1].display = "none";
            box[2].display = "block";
        } else if (about.display == "block") {
            box[2].display = "none";
            box[3].display = "block";
        } else {}
        break;
    }
}

<!-- HTML -->
<a href="javascript:tab_toggle(0)">&#9664;</a>
<a href="javascript:tab_toggle(1)">&#9654;</a>
<div id="box_home"></div>
<div id="box_port"></div>
<div id="box_about"></div>
<div id="box_contact"></div>

---

<!-- CSS -->
#box_home{display:block;}\
#box_port{display:none;}
#box_about{display:none;}
#box_contact{display:none;}

Answer 1

您不能直接將樣式作為屬性來訪問，例如

home.display

而是使用getComputedStyle()方法

getComputedStyle(home).display

Answer 2

element.style將獲取元素的內聯樣式。 嘗試getComputedStyle或添加一個類。

getComputedStyle(box[0]).getPropertyValue("display")

Answer 3

不確定您將獲得什么，但這應該可以工作：

 var currentElement = 0;

(tab_toggle = function (x) {
  var home = document.getElementById("box_home").style;
  var port = document.getElementById("box_port").style;
  var about = document.getElementById("box_about").style;
  var contact = document.getElementById("box_contact").style;
  var box = [home, port, about, contact];
  if (currentElement + x < 0 || currentElement + x > box.length - 1)
    return;

  currentElement += x;
  console.log("toggled " + currentElement);

  for (var i = 0; i < box.length; i++) {
    box[i].display = "none";
  }

  box[currentElement].display = "block";

})(0);