javascript - 我是否正确地使用 JavaScript 更改了页面？

Question

我的 index.html 页面包含 4 个具有“Content”类的独立元素，并且默认为 display:hidden ，除非 onclick 事件处理程序另有说明，下面的函数。

所以，基本上我的设置需要将 4 个网页合而为一，每个网页都隐藏起来，直到被告知加载为止。

这是实现页面更改的正确方法吗？

// Page Change Function

function ChangeContent(page) {
    var pgHome = document.getElementById("homepage");
    var pg1 = document.getElementById("page1");
    var pg2 = document.getElementById("page2");
    var pg3 = document.getElementById("page3");

switch (page) {

// Load Homepage element
    case "Home":    pgHome.style.display = 'block';
                    pg1.style.display = 'none';
                    pg2.style.display = 'none';
                    pg3.style.display = 'none';
                    location.hash = "Home";
                    document.title = "Home";
                    break;

// Load Page1 element
    case "Page1":   pgHome.style.display = 'none';  
                    pg1.style.display = 'block';
                    pg2.style.display = 'none';
                    pg3.style.display = 'none';
                    location.hash = "Page 1";
                    document.title = "Page 1";
                    break;

// Load Page2 element
     case "Page2":  pgHome.style.display = 'none';    
                    pg1.style.display = 'none';
                    pg2.style.display = 'block';
                    pg3.style.display = 'none';
                    location.hash = "Page 2";
                    document.title = "Page 2";
                    break;

// Load Page3 element
    case "Page3":   pgHome.style.display = 'none';    
                    pg1.style.display = 'none';
                    pg2.style.display = 'none';
                    pg3.style.display = 'block';
                    location.hash = "Page 3";
                    document.title = "Page 3";
                    break;

    }
}

Answer 1

是的，这有效。但是，您可以将页面的信息放入数组中，这样可以减少代码的重复性，并且在需要时添加页面会更容易:

var pages = [
  { name: 'Home', id: 'homepage', hash: 'Home', title: 'Home' },
  { name: 'Page1', id: 'page1', hash: 'Page 1', title: 'Page 1' },
  { name: 'Page2', id: 'page2', hash: 'Page 2', title: 'Page 2' },
  { name: 'Page3', id: 'page3', hash: 'Page 3', title: 'Page 3' }
];

function ChangeContent(page) {
  for (var i = 0; i < pages.length; i++) {
    var current = pages[i].name == page;
    document.getElementById(pages[i].id).style.display = current ? 'block' : 'none';
    if (current) {
      location.hash = pages[i].hash;
      document.title = pages[i].title;
    }
  }
}