jquery - Bootstrap Nav Bar JQuery の部分的な修正

Question

そのため、サイトのすべてのページを作成するためのテンプレートがあります。ここに私が欲しいものの例があります:フィドル

ただし、私のサイトでは、これらのリンクは特定のページ (つまり、about リンクをクリックすると About.html) に移動するため、そのページは html をロードします。

<div class="container">
    <div class="masthead">
        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Calendar</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

何が起こるか:
1) ナビゲーション バーの about リンクをクリックする
2) ページが About.html に移動する
3) Navbar が About リンクを 1 秒間強調表示する (その jquery コードを実行する)
4) ページが読み込まれると、Home がアクティブになりますのために再びクラス<li class="active"><a href="#">Home</a></li>

基本的に、クリックしたリンクが一瞬ハイライトされ、次にホームが再びハイライトされます。フィドルのように機能させるにはどうすればよいですか (ナビゲーションバーでリンクが強調表示されたままになります)。