html 文件的子目录

Question

我希望能够使用“someDirectory/someHTML.html/someSubDirectory”测试我的 html 文件有没有办法在不使用 div 标签和 javascript 的情况下实现这一点？

我最好的办法是使用隐藏的 div 标签、javascript 和带有屏幕 ID 的 div 标签，只需更改屏幕的 innerHTML 变量 div 标签到当前页面的 div 标签的 innerHTML 变量：

<!DOCTYPE html>
<html>
  <body>
    <style>
      .page {
        display: none;
      }
    </style>
    <p id="display">
      Current page:
      p1
    </p>
    <div id="screen"></div>
    <div id="page1" class="page">
      <!--- Page one code instead of button --->
      <button type="button" onclick="nav('p2')">Click me</button>
    </div>
    <div id="page2" class="page">
      <!--- Page two code instead of button --->
      <button type="button" onclick="nav('p1')">Don't click me</button>
    </div>
    <script>
      var currPage = 'p1';
      var disp = document.getElementById('display');
      var screen = document.getElementById('screen');
      var pages = {
        p1:document.getElementById('page1'),
        p2:document.getElementById('page2')
      };
      function nav(page) {
        screen.innerHTML = pages[page].innerHTML;
        currPage = page;
        disp.innerHTML = `Current page:\n${page}`;
        console.log('showed '+page);
      }
      nav('p1');
    </script>
  </body>
</html>

唯一的问题是它非常低效，我只想使用斜杠

Answer 1

我认为您想动态加载页面内容，以便可以使用 AJAX。创建您的 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
</head>

<body>

    <nav>
        <a href="/index.html"> <button id="index">Page 1</button></a>
        <button id="page2" onclick="loadPage(this)">Page 2</button>
        <button id="page3" onclick="loadPage(this)">Page 3</button>
    </nav>
    <p id="display">
        Contents from page 1
    </p>
    <script>
        function loadPage(p) {
            let URL = "./" + p.id + '.html';
            let Container = document.getElementById("display");

            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    Container.innerHTML = this.responseText;
                }

                
                console.log('Request send')
            }
            xhttp.open("GET", URL, false);
            xhttp.send();

        }
    </script>
</body>

</html>

然后创建你想要加载的文件 index.html

Page1.html

<h1> Contents from page 1.</h1>
<p> Your paragraphs here</p>

Page2.html

<h1> Contents from page 2. </h1>
<p> Your paragraphs for page 2 are written here. </p>

Answer 2

是否可以在地址栏中使用哈希 (#) 而不是斜线 (/)？

如果您希望硬盘上只有一个 HTML 文件，那么这将满足您的需求。地址栏看起来像 c://users/AverseMoon/myHTMLpage.html#page2.

您可以 show/hide 任何 div 使用地址栏中的散列。 （子域真的是别的东西）.

看起来像这样：

// The current page display
var disp = document.getElementById('display');

// The hashchange event handler
window.addEventListener("hashchange", function() {

  // Update display
  let currentHash = location.hash
  disp.innerHTML = "Current page: " + currentHash.substring(1)

  // Hide all .page
  document.querySelectorAll(".page").forEach(function(page) {
    page.style.display = "none";
  })
  
  // Show the current page
  document.querySelector(currentHash).style.display = "block";
})


// Page1 visible on load
document.getElementById('page1').style.display = "block";

.page {
  display: none;
}
.page a{
  border: 1px solid grey;
  border-radius: 4px;
  padding: 4px;
  background: lightgrey;
  text-decoration: none;
  color: black;
}

<p id="display">
  Current page: page1
</p>

<div id="page1" class="page">
  <a href="#page2"> Go to page #2</a>
</div>
<div id="page2" class="page">
  <a href="#page1"> Go to page #1</a>
</div>

html 文件的子目录

Subdirectories for html file

javascript

html

css

subdirectory