Question

我在搜索时发现了这段代码，并想知道是否可以扩展它以便我可以在我正在创建的项目中拥有超过2个“页面”？

这是代码：

<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

不是最优雅的解决方案，但它有效:)

uses
  ShLwApi;

    function RelPathToAbsPath(const ARelPath, ABasePath: string): string;
    var Buff:array[0..MAX_PATH] of Char;
    begin
      if PathCombine(Buff, PChar(IncludeTrailingPathDelimiter(ABasePath)), PChar(ARelPath)) = nil then
        Result := ''
      else Result:=Buff;
    end;

Answer 2

是的，您可以将代码扩展到单个页面上所需的页数。此代码只是为您提供链接以在同一页面上显示不同的内容。您必须根据需要更改脚本。

<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 个答案: