Question

我刚刚完成了home / index.html页面。将导航栏保持在原位，并在用户点击我的所有页面时保持导航栏。我是否必须将导航代码复制并粘贴到每个页面的顶部？或者还有另一种方法可以看起来更干净吗？

HMTL导航：

<nav>
    <div>
        <a href="/">
            <div id="logo"><img src="image.png" alt="Home"/></div>
            <div id="headtag"><img src="image.png" alt="Home"/></div>
            <div id="tagline"><img src="image.png" alt="Home"/></div>
        </a>
    </div>
    <div> 
        <a href="/" class="here">Home</a>
        <a href="/about.html" >About</a>      
        <a href="/services.html" >Services</a>          
        <a href="/pricing.html" >Pricing</a>    
        <a href="/contact.html" >Contact Us</a>
        <input id="srchbar" type="search" placeholder="Search">
    </div>
</nav>

Answer 1

这对我有所帮助。我的导航栏位于body标签中。导航栏的整个代码位于nav.html文件中（没有任何html或正文标记，只有导航栏的代码）。在目标页面中，它位于head标记：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

然后在body标签中，使用唯一ID和javascript块创建一个容器，将nav.html加载到容器中，如下所示：

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

Answer 2

您可以使用php制作多页网站。

创建一个header.php，您应该在其中放置所有html代码，用于菜单和社交媒体等。
使用以下代码

<? php include 'header.php'; ?>

（上面的代码将在此之前转储所有html代码）您的网站正文内容。

同样，您可以轻松创建页脚和其他元素。 PHP内置支持html代码的扩展。所以，更好地学习这个简单的解决方案。

Answer 3

我不知道它是否适合你，但它对我有用。尝试放置没有任何标题或正文标记的导航代码（只是导航栏开始和结束的代码）。将要发生的是您将单独放置导航栏的代码。假设您已经在navigation.html上有导航代码，并且您将其包含在其他页面中，假设这将是index.php。要将其包含在body标签内，导航栏将加载到其中。

Answer 4

一种非常古老但足够简单的技术是使用"Server-Side Includes"，将HTML页面包含到扩展名为.shtml的顶级页面中。例如，这将是您的index.shtml文件：

<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>

是的，它很la脚，但是有效。请记住在HTTP服务器配置（this is how to do it for Apache）中启用SSI支持。

Answer 5

Brando ZWZ为处理这种情况提供了一些很好的答案。

回复：同一导航栏在多个页面上 2018年8月21日10:13 AM | LINK

据我所知，有多种解决方案。

例如：

导航栏的整个代码位于nav.html文件中（没有任何html或body标签，只有导航栏的代码）。

然后我们可以直接从jquery中加载它，而无需编写很多代码。

赞：

    <!--Navigation bar-->
    <div id="nav-placeholder">

    </div>

    <script>
    $(function(){
      $("#nav-placeholder").load("nav.html");
    });
    </script>
    <!--end of Navigation bar-->

解决方案2：

您可以使用JavaScript代码生成整个导航栏。

赞：

JavaScript代码：

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';

    $("#main-bar").html(bar);

    var id = getValueByName("id");
    $("#" + id).addClass("active");
});

function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>

https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages

多个页面上的HTML / CSS导航栏

5 个答案: