0

我已经下载了一个网站的引导模板，我正在尝试了解它是如何工作的。到目前为止看起来不错，但我下载的模板在 5 个主要页面中具有大部分相同的内容，并且它不是从一个地方生成或引用的。由于所有网页的导航栏都是相同的，我如何在没有服务器端的情况下引用所有页面以包含相同的标题（或其他 html）？这似乎是一个简单的 HTML 或 JS 解决方案，只是似乎找不到我要找的东西....

假设这是导航栏（另存为/component/navbar.html¿maybe？）：

<div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="index.html">
                    <b>Your</b>Site
                </a>
                <div class="nav-collapse fr">
                    <ul class="nav">
                        <li><a href="index.html">Home</a></li>
                        <li class="active"><a href="work.html">Our work</a></li>
                        <li><a href="about.html">About us</a></li>
                        <!-- <li><a href="plans.html">Pricing</a></li> -->
                        <li><a href="explore.html">Explore</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                        <li><a href="alt.html">Alt</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li><button class="btn btn-primary">Sign In</button></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div><!-- end .container -->
        </div><!-- end .navbar-inner -->
    </div><!-- end .navbar -->

如何将页面链接到要包含的这段 HTML？

4

1 回答 1

1

你可以用 jQuery 来做，它总是出现在 boostrap 中。

将内容移植<div class="navbar">到您建议的文件中/component/navbar.html- 所以 HTML 看起来像这样

<div class="navbar" id="navbar"> 
</div>

在脚本中，通过 AJAX将内容加载navbar.html到#navbar

$(document).ready(function(){
    $.ajax({
        url : 'component/navbar.html',
        success(html) {
            $("#navbar").html(html);
        }
    });
});

编辑：或者只是$("#navbar").load('component/navbar.html'); 这可能是您正在寻找的解决方案，它的行为更像是一种可以放在标题中的“包含”。

于 2012-11-09T07:32:18.553 回答