javascript - css/javascriptでアクティブなページ/タブをどのように表示しますか?

Question

このウェブサイトと非常によく似たことをしたい: http://feed-the-beast.com/

ナビゲーション リンクをクリックすると、ページが適切な ID までスライドし、「アクティブな」ナビゲーション ボタンが何らかの方法で強調表示されます。これどうやってするの？また、フォーラム用に別のページも用意するので、これを複数のページに対して行いたいと考えています。

編集:ページを下にスライドさせるにはどうすればよいですか?

Answer 1

ここでデモを参照してください: http://jsfiddle.net/4sGmG/1/

HTML:

<nav>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
    <a href="#four">Four</a>
    <a href="#five">Five</a>
</nav>

<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
<div id="five">Five</div>

jQuery:

$('nav a').on('click', function() {
    var activeDiv = $(this).attr('href');

    //setActiveMenuItem($(this));

    $('html, body').animate({
       scrollTop: $(activeDiv).offset().top
    }, 2000);        
});

$(window).on('scroll', function(e) {
    var bodyTop = $(document).scrollTop();

    $('div').each(function() {
        var offset = $(this).offset().top - $(window).scrollTop();

        if (offset >= 0) {
            setActiveMenuItem($(this).attr('id'));

            return false;
        }
    });
});

function setActiveMenuItem(id) {
    $('a[href=#' + id + ']').addClass('active');
    $('a[href=#' + id + ']').siblings().removeClass('active');
}

Answer 2

JavaScript (jQuery) でソフト化された基本的なアンカー ナビゲーションでうまくいきます。Firebug または Chrome の開発者ツールに慣れて、そのサイトがどのように行われているかを確認してください。

Twitter Bootstrap は、位置検出メカニズムである ScrollSpy を提供しており、これも役立つ可能性があります。http://twitter.github.com/bootstrap/javascript.html#scrollspy