シングルページのウェブサイトのナビゲーション選択された状態

Question

NEW to SO！フレーズにこの質問:)

私はフッターに位置固定ナビゲーションバーを備えた単一のページ、垂直スクロールのウェブサイトを持っているが、より良い方法を提案してください。私は、ページ上のdivにナビゲーションをリンクするためにlocal.scrollとアンカーを使用しています。

私は、ユーザーが1つのリンクをクリックすると、それは選択された状態に変化していできるようにしたいと思います。複数のページのサイトのようにアクティブなリンクごとにclass = "select"を使用する代わりに、単一ページのリンクをスタイル/コードする方法がわかりません。

このサイトは、 http://www.kristaganelon.com/#portfolio-section

Answer 1

この例では、人気のあるライブラリJQueryの形式でJavascriptを使用して、選択した状態をナビゲーションに作成し、ページをスクロールしています。

JQuery

このライブラリは、それが簡単にCSSでページをスタイリングしている人にはおなじみのシンプルなCSSセレクタを使用してイベントをバインドするよう、あなたが探しているイベントハンドラの種類を作成するための非常に人気があります。 ID、クラス、および属性の規則は、要素の検索、イベントのバインドまたは状態の変更に使用されます。

jQueryのサイトが参考にチュートリアルがたくさんありますが、簡単なクリックイベントが次のようになります。

$(document).ready(function(){ 
     $('.button').click(function(){ 
     alert('You clicked me!'); 
    }); 
}); 

あなたは要素をクリックするためにjQueryの.addClassを利用することができる、それを特定の視覚的な状態を与える：

$(document).ready(function(){ 
     $('.button').click(function(){ 
     $(this).addClass('clicked'); 
    }); 
}); 

私はなど、あなたが図書館の資料に目を通すと、最初のページにそれを含める方法を学ぶお勧めして、結合、いくつかの基本的なイベントの上に見て、（あなたがアクティブな状態を削除するには、この必要になりますので）トグル学習これらのことがあなたを助けますインタラクティブな要素をはるかに簡単に作成

Answer 2

をご覧ください。 .toggleClass(classname) をご覧ください。あなたはcssの疑似クラスを介してフォールバックを提供することができます（一時的なので、javascriptの解決策と同じではありません）。