1

CSS メニューを含む HTML ページがあります。

CSSメニューをクリックすると、関連するコンテンツがフェードインおよびフェードアウトする、これを単一ページのWebサイトにしたいと考えています。

ユーザーがナビゲーション バーに表示されているコンテンツを確認できるように、.active クラスを保持できるようにしたいと考えています。

EG したがって、「about」をクリックすると、「about」という div がそのセクションのコンテンツとともにフェードインします (これはレスポンシブ コンテンツ領域である必要があります)。次に連絡先をクリックすると、内容がフェードアウトし、連絡先の内容がフェードインします。この pls ヘルプをどこから始めればよいかわかりません。

私が探しているものの例はここにあります http://www.farewelljr.com

私のページはこちらhttp://www.hogshouse.com/beardsonwheels/index.html

4

1 に答える 1

3

これは非常に簡単な例です。

これはコードです：

function showContent(name) {
    $('#main .' + name).fadeIn(500);
}

$('#menu .link').click(function() {
    if ($(this).hasClass('active')) return false;
    var name = $(this).attr('id');
    var $visible = $('#main .content:visible');
    $('.active').removeClass('active');
    $(this).addClass('active');
    if ($visible.length == 0) showContent(name);
    else $visible.fadeOut(500, function() {    
        showContent(name);
    });
});

ajax を使用してコンテンツをロードする場合は、次のようにします。

function showContent(name) {
    var url = "/path/to/script";
    $.ajax({
        type:'GET',
        url: url,
        data:{data:name},
        success:function(data) {
            $('#main').html(data).fadeIn(500);
        }
    });
}
于 2013-06-23T20:07:16.793 に答える