css - 在所有页面中使用部分 html-body

Question

可能标题不太清楚，因为我不确定如何解释。 我正在创建我的 html(一次工作，所以不使用 java。只是带有 css 的普通 html)。

考虑这个示意图(Pic 1)。 整个网站的所有页面的左侧面板和页脚几乎相同，它包含指向网站其他页面的链接。

|================================|
||-------||------------||------| |
||LEFT   ||CENTER      ||RIGHT | |
||PANEL  ||PANEL       ||PANEL | |
||_______||____________||______| |
||_______________________________|
||  FOOTER                       |
||_______________________________|
|================================|

图1网页布局

|------------------------|
|                        |
|link to pA              |
|link to pB              |
|                        |
|current link highlited  |
|------------------------|

图2。左侧面板布局

但以我目前的知识，如果我试图在左侧面板和页脚中进行任何更改，我必须更改所有页面。是否可以将这个左面板写在一个单独的文件中，并在需要的地方包含它？

此外，可能是一个单独的问题，但已链接，假设可以将左侧面板写在单独的文件中。是否可以突出显示当前访问的页面链接？(参见图2)

Answer 1

EDIT 对不起，我没有足够的重视。你不是用PHP吗？ 在那种情况下，看看 HTML5 include file

虽然我找不到在主页和包含的文件之间共享数据的方法。也许如果可能的话，您可以在包含的文件中使用 #标签，例如mypage.html#hello并使用 JavaScript 解析它以找出您正在访问的页面。

---

您实际上是在回答自己的问题。只需取出 HTML 代码并将其放在一个单独的文件中，然后将其包含在原来的位置。

说你的代码是

<div id="main">
    <div id="left-panel">
        <div id="links etc"></div>
    </div>
    <div id="another"></div>
</div>

你会选择 left-panel部分并放在一个单独的文件中，并将其包含在原处。

left-panel.php

<div id="left-panel">
    <div id="links etc"></div>
</div>

原始文件

<div id="main">
    <?php include 'left-panel.php'; ?>
    <div id="another"></div>
</div>

要知道您当前正在访问哪个页面，您可以使用变量。在你放的每一页中说 <?php $page = 'shop'; ?>和里面left-panel.php使用 if 语句，例如:

<ul>
    <li><a href="page1.php" <?php if($page == 'page1') echo 'class="active"'; ?>>Page1</li>
    <li><a href="page2.php" <?php if($page == 'page2') echo 'class="active"'; ?>>Page2</li>
</ul> 

为了避免一堆 if 语句，您可以将您的页面放在一个数组中并循环它们:

<ul>
<?php
$pages = array('page1' => 'Page1', 'page2' => 'Page2', 'page3' => 'Page3');
foreach($pages as $file => $name) {
    echo '<li><a href="'.$file.'" '.($page == $file ? 'class="active"' : '').'>'.$name.'</a></li>';
}
?>