0

クリックすると ajax 呼び出しを行うメニューがあり、フッター付きの小さなアニメーションで div にコンテンツをロードするページがあります。(ここでわかるように: http://perishablepress.com/slide-fade-content/ ページを開いたときに最初のメニュー項目を既にロードする方法があるかどうか疑問に思っています。私のコード:

<ul>
<li><a class="blog" href="#blog">Blog</a></li>
<li><a class="contact" href="#contact">Contact</a></li>
</ul>

そしてスクリプト：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>jQuery(document).ready(function($) {
$('.blog').on('click', function() {
    var href = $(this).attr('href');
    if ($('#ajax').is(':visible')) {
        $('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
    }
    $('#ajax').css({ display:'block' }).animate({ height:'200px' },function() {
        $('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); 
        $('#ajax').load('blog.php ' + href, function() {
            $('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': '#0e0e0e' }); }); }); }); });    



    jQuery(document).ready(function($) {
$('.contact').on('click', function() {
    var href = $(this).attr('href');
    if ($('#ajax').is(':visible')) {
        $('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
    }
    $('#ajax').css({ display:'block' }).animate({ height:'600px' },function() {
        $('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); 
        $('#ajax').load('contact.php ' + href, function() {
            $('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': '#0e0e0e' });
        });
    });
});
});

そのため、コンテンツを読み込むには「ブログ」または「連絡先」をクリックする必要がありますが、ページを開くときにデフォルトで「ブログ」が読み込まれるようにしたいと思います。

また、コンテンツだけでなく、別のバージョンの jquery をロードする方法はありますか。たとえば、「お問い合わせ」をクリックすると、お問い合わせフォームが別のバージョンの jquery で動作します。

誰かが私のような超初心者を助けてくれることを願っています! よろしくお願いします！

4

1 に答える 1

0

.click()または.trigger('click').blogを使用して、要素のクリック イベントを手動でトリガーするだけです。

jQuery(document).ready(function ($) {
    $('.blog').on('click', function () {
        var href = $(this).attr('href');
        if ($('#ajax').is(':visible')) {
            $('#ajax').css({
                display: 'block'
            }).animate({
                height: '0'
            }).empty();
        }
        $('#ajax').css({
            display: 'block'
        }).animate({
            height: '200px'
        }, function () {
            $('#loader').css({
                border: 'none',
                position: 'relative',
                top: '24px',
                left: '48px',
                boxShadow: 'none'
            });
            $('#ajax').load('blog.php ' + href, function () {
                $('#ajax').hide().fadeIn('slow').colorFade({
                    'fadeColor': '#0e0e0e'
                });
            });
        });
    }).click(); // trigger the click event for the blog event here
});
于 2013-09-18T00:08:42.373 に答える