Question

我的index.html页面包含4个单独的元素，其中包含类＆＃34;内容＆＃34;，并且默认为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;
    }
  }
}

Answer 2

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

更快更清洁的方法是隐藏不需要的页面，并显示所需的页面。

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

}

我正确地使用JavaScript更改页面吗？

2 个答案: