☰

How can I reuse a navigation bar on multiple pages? Ask Question

tag-icon • tag-icon html navbar
How can I reuse a navigation bar on multiple pages? Ask Question

home/index.html ページの作成が終わりました。ナビゲーション バーを現在の場所に保ち、ユーザーがすべてのページをクリックしている間もそのままにしておきます。ナビゲーション コードを各ページの上部にコピーして貼り付ける必要がありますか? それとも、よりきれいに見える別の方法がありますか?

HTMLナビゲーション:

<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>

ベストアンサー1

これが私を助けてくれました。私のナビゲーション バーは body タグ内にあります。ナビゲーション バーのコード全体がnav.htmlファイル内にあります (html や body タグはなく、ナビゲーション バーのコードのみ)。ターゲット ページでは、次のコードがタグ内にありますhead:

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

次に、body タグで、nav.html次のように、一意の ID とコンテナに読み込むための JavaScript ブロックを使用してコンテナが作成されます。

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

</div>

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

おすすめ記事