html - 如何从单个位置调用 DIV 中的 HTML？

Question

首先，我对 HTML/CSS/Javascript 还很陌生。

我创建了一个具有顶部菜单的网站。菜单中的一项是远足径。

格式为：

远足路径位置---路径名称

我计划有很多不同的路径位置，并且不希望我的 HTML 混乱，所以我希望将这部分代码放在一个可以编辑的位置，并且更改显示在每个页面上。

<div class="header">
  <table id="topmenu" class="header">
  <tr>
  <td class="submen">

    <div style="width: 100%; display: inline;">
      <ul id="nav">
        <li class="top"><a href="../../" class="top_link"><span class="down">Home</span></a></li>
        <li class="top"><a href="../" class="top_link"><span class="down">Hiking Trails</span></a>
          <ul class="sub">
            <li><a href="../" class="alltrails"> All Trails </a></li>
            <li><a href="./" class="cmsp"> State Park 1 </a>
              <ul>
                <li><a href="./index.html#backside"> Trail </a></li>
                <li><a href="./index.html#campingg"> Trail </a></li>
                <li><a href="./index.html#campingf"> Trail </a></li>
                <li><a href="./index.html#crowders"> Trail </a></li>
                <li><a href="./index.html#fern"> Trail </a></li>
                <li><a href="./index.html#lake"> Trail </a></li>
                <li><a href="./index.html#pinnacle"> Trail </a></li>
                <li><a href="./index.html#ridgeline"> Trail </a></li>
                <li><a href="./index.html#rocktop"> Trail </a></li>
                <li><a href="./index.html#tower"> Trail </a></li>
                <li><a href="./index.html#turnback"> Trail </a></li>
              </ul>
            </li>
            <li><a href="../ascg/" class="ascg"> State Park 2 </a></li>
            <li><a href="../mnp/" class="mnp"> State Park 3 </a></li>
          </ul>
        </li>
        <li class="top"><a href="../../contact/" class="top_link"><span class="down">Contact</span></a></li>
      </ul>
    </div>
  </td>
  </tr>
  </table>
</div>

谢谢你的帮助！同时，我会继续寻找。

score 4 · Accepted Answer

完成此操作的最佳方法是使用 PHPinclude将您想要的数据部分保存在一个带有扩展名的文件中filename.php，然后在您希望该文件显示的所有页面上，您将通过这样做<?php include('filepath/filename.php'); ?>和您的所有页面包含它你显示这个也必须有一个.php扩展名，所以像这样

索引.php

<?php include('../includes/header.php'); ?>
<body>
<div class="body-container">

</div>
</body>
</html>

header.php 文件夹内的“包含”

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF=8">
  // Rest of your head content
</head>
<header class="page-header">
  <div class="logo"></div>
  <nav class="main-nav">

  </nav>
</header>

正如你所知道的，php 必须在服务器上才能运行。

score 1 · Accepted Answer

试试这个

<div style="width: 100%; display: inline;">
<ul id="nav">
<li class="top"><a href="../../" class="top_link"><span class="down">Home</span></a>  </li>
<li class="top"><a href="../" class="top_link"><span class="down">Hiking Trails</span></a>
      <ul class="sub">
        <li><a href="../" class="alltrails"> All Trails </a></li>
        <li><a href="./" class="cmsp"> State Park 1 </a>
          <ul>
          <script language="javascript" type="text/javascript" >
function jumpto(x){

if (document.form1.jumpmenu.value != "null") {
document.location.href = x
}
}
</script>
<form name="form1">
<select name="jumpmenu"    onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option>Jump to...</option>
<option value="./index.html#homepage">Homepage</option>
<option value="./index.html#javascript">JavaScript</option>
<option value="./index.html#HTML">HTML</option>
<option value="./index.html#CSS">CSS</option>
</select>
</form>
</ul>
</li>
<li><a href="../ascg/" class="ascg"> State Park 2 </a></li>
<li><a href="../mnp/" class="mnp"> State Park 3 </a></li>
</ul>
</li>
<li class="top"><a href="../../contact/" class="top_link"><span class="down">Contact</span></a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>

score 1 · Accepted Answer

您可以使用 javascript 和 ajax 调用来实现。

算法：

使用 ajax 获取 html 片段。
去掉任何不必要的标签。(javascript)
使用 javascript 将其插入 DOM。

如果将 jquery 添加到等式中，它会变得非常简单，因为它已经有一个函数：http: //api.jquery.com/load/

有关如何执行此操作的完整示例，请参阅此问题：如何使用 jQuery 加载页面片段？

score 1 · Accepted Answer

有不同的方法可以实现这一目标。

但是由于你没有提到你的应用程序的基础（php、c#、数据库引擎......），最简单的独立于数据库、csv 或 xml 解析等的方法......如下。

代码或解决方案未优化，这只是为了给您一个想法。

1- 创建一个名为 trailsList.js 的文件，并将其放入文件中（或您将重用的任何代码）：

// Trails List
document.write('<li><a href="./index.html#backside"> Trail </a></li>');
document.write('<li><a href="./index.html#campingg"> Trail </a></li>');
document.write('<li><a href="./index.html#campingf"> Trail </a></li>');
document.write('<li><a href="./index.html#crowders"> Trail </a></li>');
document.write('<li><a href="./index.html#fern"> Trail </a></li>');
document.write('<li><a href="./index.html#lake"> Trail </a></li>');
document.write('<li><a href="./index.html#pinnacle"> Trail </a></li>');
document.write('<li><a href="./index.html#ridgeline"> Trail </a></li>');
document.write('<li><a href="./index.html#rocktop"> Trail </a></li>');
document.write('<li><a href="./index.html#tower"> Trail </a></li>');
document.write('<li><a href="./index.html#turnback"> Trail </a></li>');

2- 在文档中您希望代码出现的任何位置调用 trailsList.js。

.
.
.
  <li><a href="./" class="cmsp"> State Park 1 </a>
   <ul>
    <script src="trailsList.js">
    </script>
   </ul>
  </li>
.
.
.

html - 如何从单个位置调用 DIV 中的 HTML？

4 回答 4

Related

Reference