アンカーリンクの位置にスクロールする - 望ましくない動作と非効率的な実装

Question

CSSとHTMLを使用して簡単なタブ付きコンテンツ表示を作成しました。このコードは、他のコンテンツを含むかなり長いページの途中に埋め込まれます。

ここjsFiddleです：http://jsfiddle.net/ollyf/R9rq2/

私は:targetの使用を作ったが、私はそれがどのように動作するか全くわかりません。いくつかのチュートリアルを読むが、私はその動作を完全には理解していない。私はこれが悪い/非効率的なコードのように感じる。

1. このタブ付きコンテンツエフェクトを実現するための効率的な方法はありますか？
2. そうでない場合は、スクロール位置をDIVの上部にスナップしないでコンテンツを表示するにはどうすればよいですか？

Answer 1

:target疑似セレクタは、ページアンカーによってトリガされます。これは、URLがhttp://www.example.com/#anchor1#anchor1:targetの場合にアクティブになることを意味します。ページは＃anchor1要素までスクロールされます。これはブラウザのデフォルトの機能です。

タブ効果を達成するためのもう1つのオプションは、JavaScriptを使用することです。概念はjavascriptと同じですが、クリックハンドラを使用してdisplay属性を切り替えています。タブにはいくつか用意されているスクリプトが用意されています。ここに1つの例がありますhttp://jquerytools.org/demos/tabs/index.html

希望はこれをクリアするのに役立ちます。