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 回答