0

私は自分のコンピューター上にある最初の Web サイトに取り組んでおり、それをインターネットに掲載する予定はありません。ただし、他のページでナビゲーションとフッターを再利用したい。

いいえ。フレームなし。ジャバスクリプト？とにかくHTMLを使用することはありますか?

4

2 に答える 2

0

少し古いことは知っていますが、これを達成する方法を見つけました。

同じナビゲーションを使用するために、ajax を使用してコードの一部を HTML にロードし、ページの残りの部分を変更せずに残すことができます。

コード：

このファイルにこのコードがあるとしましょう：

home.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="thirdParty/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
            <a class="navbar-brand" href="#/">NAVBAR</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class=" active">
                    <a href="#/">Home</a>
                </li>
                <li>
                    <a href="#/about">About</a>
                </li>
                <li>
                    <a href="#about">Rebout</a>
                </li>
            </ul>
        </div>
    </nav>
    <main id="main">
    </main>
    <script src="thirdParty/jquery-1.12.0.min.js"></script>
    <script src="thirdParty/jquery.ba-hashchange.min.js"></script>
    <script src="js/partialViewLoad.js"></script>
    <script src="thirdParty/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>

「partialViews/main.html」と「partialViews/about.html」という html の部分ビューとして機能するファイルをさらに 2 つ用意します。（それらのファイルにいくつかのhtmlを入れてください）

HTML を更新するためにプラグイン jquery.ba-hashchange.min を使用します。

少なくとも、部分ビューをロードするために使用するスクリプトがあります。

loadPartialView.js

$(function () {
    $(window).hashchange(function () {
        if (location.hash.indexOf('#/') > -1) {
            loadPartial(location.hash.substr(location.hash.lastIndexOf('/') + 1));
        }
    });
    $(window).hashchange();
});

function loadPartial(partialName) {
    partialName = partialName || 'main';
    $.get('/partialViews/' + partialName + '.html').done(function (html) {
        $('#main').html(html);
    });
}

$(document).ready(function() { loadPartial(); });

ul のリンクをクリックすると、ハッシュの場所が変更され、作成した jquery コールバックがトリガーされます。その瞬間に、部分ビューをロードします。

これを実現するには、サーバーとより堅牢な言語を使用することをお勧めします。しかし、このソリューションは機能し、実装が簡単で、サーバー上でも機能します。

于 2016-01-11T06:47:01.803 に答える
0

モデストはこれを行います。

インターネットに公開しない場合は特に簡単です。セクションに jquery とmodest-preview.jsを配置するだけで、すぐに使い始めることができます。

main.xhtml

<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="modest-preview.js"></script>
    <include>myNav</include>
  </head>
  <body>
    <myNav/>
  </body>
</html>

myNav.xml HTML | CSS | JavaScript | jQuery

于 2013-09-06T03:28:15.873 に答える