Question

我有一个页面，其中有一个菜单在单击时进行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版本一起工作。

我希望有人可以帮助像我一样的超级菜鸟！非常感谢！

Answer 1

只需使用.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
});

通过点击和加载在ajax上加载内容？

1 个答案: