Question

我试图为多个.html文件使用相同的标头。我关注this thread和some others，但它似乎无法正常工作。

标题未显示在vba.html页面上。

navBarTest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="D:\Batman\Documents\- Programming\Bootstrap - v3.3.7\css\bootstrap.css">
    <style type="text/css">
    /* Custom CSS goes in here, to override the Bootstrap CSS if you want */
</style>
<title>Navbar test</title>
</head>
<body>
    <div id="nav-placeholder"></div>

    <script  src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="D:\Batman\Documents\- Programming\Bootstrap - v3.3.7\js\bootstrap.min.js"></script>

    <script>
        $("#nav-placeholder").load("navBar.html");
    </script>

</body>
</html>

我期待NavBar显示<div id="nav-placeholder"></div>所在的位置。

navBar.html

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><i class="fa fa-home" area-hidden="true"></i>EtKC</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="about.html">About <span class="sr-only">(current)</span></a></li>
                <li><a href="mailto:myemail@gmail.com">Contact</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Topics <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="vba.html">VBA</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

您可以通过jquery在每个* .html文件中加载相同的导航栏。只需要在html文件中添加一个标头标签，并为标题分配id或类，最适合你的是什么，然后在单独的JAVASCRIPT文件中包含＆＃34;导航条形码＆＃34;需要在html文件的头文件中加载。例如：

<强> *。HTML

<header id="header"></header>

**JAVASCRIPT FILE:**
function navbar()
{
var navbar = "<nav>your navbar code goes here</nav>";
$('#header').html(navbar);
}

Answer 2

您可以尝试以下脚本

＆＃13;

<script>
  $("#nav-placeholder").load("navBar.html")
</script>

＆＃13;

但这需要运行localhost服务器。我假设你在服务器上运行它

Answer 3

我为您编写了已完成的方案。请检查以下代码。我已经执行了代码，它正在运行。我希望它能解决你的问题。

HTML文件

<!DOCTYPE html>
<html>
<head>
    <title>HTML FILE</title>
    <!-- THIS IS JQUERY FILE, YOU CAN DOWNLOAD IT FROM THE JQUERY SITE
    IT MUST BE INCLUDED IN THE HEADER TO AVOID ANY CONFLICT. YOU CAN 
    INCLUDE IT INTO FOOTER OR IN THE END OF THE BODY TOO.
     -->
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>

    <header id="header"></header>
    <section>This is section</section>


    <!-- THE FOLLOWING IS THE JAVASCRIPT FILE, IN WHICH 
        I HAVE CODE THE NAV BAR. THIS JAVSCRIPT FILE MUST BE INCLUDED IN THE END
        OF THE BODY.
     -->
<script type="text/javascript" src="myscript.js"></script>
</body>
</html>

JAVSCRIPT文件

var navbar = "<nav><ul>";

navbar = navbar+ "<li>This is nav bar</li></ul>";

$('#header').html(navbar);

对多个.html文件使用相同的导航栏？

3 个答案: