单个 html 文件中的多个内容“页面”

Question

I found this code while searching and was wondering if it is possible to extend it so that i can have more than 2 'pages' on the project i am creating?我在搜索时发现了这段代码，想知道是否可以扩展它，以便我可以在我创建的项目上拥有 2 个以上的“页面”？

here is the code:这是代码：

<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>

<div id="Page1">
Content of page 1
<a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
</div>

<div id="Page2" style="display:none">
Content of page 2
<a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
</div>

</body>
</html>

Answer 1

Not the most elegant solution but it works :)不是最优雅的解决方案，但它有效:)

<html>
<head>
<style>
    ul li {
        display: inline-block;
    }
    .shown: {
        display: block;
    }
    .hidden: {
        display: none;
    }
</style>
</head>
<body>

<ul>
    <li class="links" data-link="0"><a href="#">Page1</a></li>
    <li class="links" data-link="1"><a href="#">Page2</a></li>
    <li class="links" data-link="2"><a href="#">Page3</a></li>
    <li class="links" data-link="3"><a href="#">Page4</a></li>
</ul>


<div class="pages" id="Page1" data-item="0">
Content of page 1
</div>

<div class="pages" id="Page2" data-item="1" style="display:none">
Content of page 2
</div>

<div class="pages" id="Page3" data-item="2" style="display:none">
Content of page 3
</div>

<div class="pages" id="Page4" data-item="3" style="display:none">
Content of page 4
</div>
<script>
(function() {
    var links = document.querySelectorAll('.links');
    var pages = document.querySelectorAll('.pages');
    for(var i=0;i<links.length;i++) {
        links[i].addEventListener('click', function() {
            for(var j=0;j<pages.length;j++) {
                pages[j].setAttribute('style', 'display: none');
                if(this.getAttribute('data-link') === pages[j].getAttribute('data-item')) {
                    pages[j].setAttribute('style', 'display: block')
                }
            }
        })
    }
}());
</script>
</body>
</html>

Answer 2

Yes, you can extend the code to as many pages you want on a single page.是的，您可以在单个页面上将代码扩展到任意数量的页面。 This code simply gives you link to show different content on a same page.此代码只是为您提供在同一页面上显示不同内容的链接。 You will have to change your script according to your need.您必须根据需要更改脚本。

<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>

<div id="Page1">
Content of page 1
<a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
</div>

<div id="Page2" style="display:none">
Content of page 2
<a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
</div>
<div id="Page3" style="display:none">
Content of page 3
<a href="#" onclick="return show('Page3','Page1');">Show page 3</a>
</div>

</body>
</html>

Answer 3

<script>
var lastPage = 'Page1';
function show(shown) {
  document.getElementById(shown).style.display='block';
  document.getElementById(lastPage).style.display='none';
  lastPage = shown;
  return false;
}
</script>
<a href="#" onclick="return show('Page2');">Show page 2</a>

单个 html 文件中的多个内容“页面”

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-10-11 14:37:21

解决方案2
0 2016-10-11 14:02:10

解决方案3
0

单个 html 文件中的多个内容“页面”

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-10-11 14:37:21

解决方案2 0 2016-10-11 14:02:10

解决方案3 0

解决方案1
1 已采纳 2016-10-11 14:37:21

解决方案2
0 2016-10-11 14:02:10

解决方案3
0