0

Web サイトのブートストラップ テンプレートをダウンロードしました。今のところ問題ないように見えますが、ダウンロードしたテンプレートは 5 つのメイン ページでほとんど同じコンテンツを含んでおり、単一の場所から生成または参照されていません。ナビゲーション バーはすべての Web ページで同じなので、サーバー側なしで、すべてのページを参照して同じヘッダー (または他の 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でそれを行うことができます。

あなたが提案したように、内部のコンテンツ<div class="navbar">をファイルに移植します-HTML/component/navbar.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 に答える