下面是一个简单的示例，展示了如何使用HTML和JavaScript来实现根据不同的功能显示不同的页面。

HTML代码：

    
    


    首页
    关于
    联系我们

    

        
欢迎来到首页
        
这是我们的主要页面。
    

    

        
关于我们
        
我们是一家创新的公司。
    

    

        
联系我们
        
请填写以下联系表单：
        

            
        
    

JavaScript代码（script.js）：

function showPage(page) {
    // 隐藏所有页面
    var pages = document.querySelectorAll('div[id$="Page"]');
    for (var i = 0; i < pages.length; i++) {
        pages[i].style.display = 'none';
    }

    // 显示指定页面
    var pageElement = document.getElementById(page + 'Page');
    if (pageElement) {
        pageElement.style.display = 'block';
    }
}

在这个示例中，我们使用了三个按钮来切换不同的页面。当点击按钮时，调用showPage函数，并传入相应的页面名称。showPage函数首先隐藏所有的页面，然后根据传入的页面名称显示对应的页面。

在HTML代码中，我们使用了div元素来表示不同的页面，并给它们设置了不同的id。通过设置style.display属性为none，我们可以将其隐藏起来。通过设置style.display属性为block，我们可以将其显示出来。

注意，这只是一个简单的示例，实际应用中可能会有更复杂的页面切换逻辑。