Question

HTML：

<div class="container-fluid">
<div class="sidebar">
    <ul class="pills">  
        <li id="l1"><a id="link1">Lesson 1</a></li> <hr>
        <li id="l2"><a href="#" >Lesson 2</a></li> <hr>
        <li id="l3"><a href="#" >Lesson 3</a></li> <hr> 
    </ul>
   <div class="span16" id="target">
</div>

使用Javascript：

$('#l1').click(function(){
    $('#target').fadeOut('fast', function(){
        $('#target').load("lesson/lesson1.html", function(){
                $('#target').fadeIn('slow');

                });
            });

        });

我的网页中有5个链接，我想知道是否还有一段代码而不是复制+粘贴多次。

Answer 1

$('a.AjaxLink').click(function(){
    var url = this.href;

    $('#target').fadeOut('fast')
                .load(url, function(){ $(this).stop(true, false).fadeIn('slow'); });
    });

    return false;
});

此代码处理类<a>的所有AjaxLink的点击事件。

在点击处理程序中，它抓取href，淡出#target，然后执行AJAX加载。

当AJAX加载完成时，stops the animation（如果AJAX比淡入淡出更快），则将其淡入。

最后，它告诉浏览器不要通过返回false来采取默认操作（导航到页面）。

Answer 2

使用class代替id。使用class选择元素您也可以使用.each()方法

Answer 3

您可以使用新的jQuery方法执行此操作。鉴于此HTML：

<a class="hello" href="#">Hello</a>
<a class="goodbye" href="#">Goodbye</a>

<div id="target"></div>

您将使用此代码：

jQuery.fn.switchTarget = function( target, href ) {
    var $target = $(target);

    this.bind( 'click', function(e) {
        e.preventDefault();

        $target.fadeOut('fast', function() {
            $target.load( href, function() {
                $target.fadeIn('slow');
            });
        });
    });

    return this;
};

$('.hello').switchTarget( '#target', 'hello.html' );
$('.goodbye').switchTarget( '#target', 'goodbye.html' );

适用于多个元素的功能

3 个答案: