2

アクティブなページ リンクをアクティブなクラスで更新する固定サイド メニューを実装しようとしています。スクロール スパイ HTML5 要素を本文に配置しましたが、問題が発生しています。誰かが私のページをチェックアウトして、何が問題なのかを判断できるかどうかを確認できますか?

http://mattaltepeter.com/new/about.shtml

4

1 に答える 1

8

問題は、ナビゲーションをdiv内に配置し、ナビゲーションIDをスクロールに使用するよりも重要なことです。scrollspyを機能させるには、次のように「side-nav」をspan3divに割り当てることができます。ブラウザのJsfiddleデモ

<div class="row">
<div class="span3" id="side-nav">
    <ul class="nav nav-list about-list hidden-phone hidden-tablet affix" >
        <li class="active"><a href="#about"><i class="icon-chevron-right"></i> About Me</a></li>
        <li><a href="#education"><i class="icon-chevron-right"></i> Education</a></li>
        <li><a href="#work"><i class="icon-chevron-right"></i> Work Experience</a></li>
        <li ><a href="#sports"><i class="icon-chevron-right"></i> Sports</a></li>
    </ul>
</div>

次の方法でパラセクションを作成できます。

<div class="page-header" id="about">
        <h1 >About Me</h1>

    <p>My name is Matt Altepeter. I am 21 years old .</p>
    </div>

すでに本文に追加されているため、スクロールを初期化するためのスクリプトを削除してください

<body data-offset="50" data-target="#side-nav" data-spy="scroll">

jqueryの直後で他のスクリプトの前にbootstrap.jsを宣言することをお勧めします。すべてのスクリプトをフッターに入れて、読み込み時間を節約します。

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
于 2013-03-08T11:17:32.787 に答える