我是否正确地使用 JavaScript 更改页面

Am I changing pages with JavaScript correctly?

本文关键字：JavaScript 是否正确地更新时间：2023-09-26

我的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;
    }
}

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

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

您使用的方法使您的代码变得多余。

一种更快、更干净的方法是隐藏不需要的页面，并显示所需的页面。

function ChangeContent(page) {
    var pages={"homepage":{title: "Home"}, "page1":{title: "Page 1"}, "page2":{title: "Page 2"},"page3":{title: "Page 3"}};

    //Show the only one needed
    for(var pageName in pages)
    {
        if(page!==pageName)
        {
            document.getElementById(pageName).style.display='none';
        }
        else
        {
            document.getElementById(pageName).style.display='block';
            location.hash=pages[pageName].title;
            document.title=pages[pageName].title;
        }
    }
}