jquery - 如何简化 jQuery 代码

Question

这是我接触 jQuery 的开始。我制作了一个简单的内容滑动导航，它非常适合我，但我不知道如何简化我的代码:

$(document).ready(function(){
    // Sliding content navigation
    var active = ".active"
    $('a.europa').click(function () {
        $(active).hide("slide", { direction: "left" }, 500);
        $('#europa-view').delay(500).show("slide", { direction: "left" }, 500);
        $('#italia-view, #emilia-view').removeClass('active');
        $('#europa-view').addClass('active');        
    });

    $('a.italia').click(function () {
        $(active).hide("slide", { direction: "left" }, 500);
        $('#italia-view').delay(500).show("slide", { direction: "left" }, 500);
        $('#europa-view, #emilia-view').removeClass('active');
        $('#italia-view').addClass('active');
    });

    $('a.emilia').click(function () {
        $(active).hide("slide", { direction: "left" }, 500);
        $('#emilia-view').delay(500).show("slide", { direction: "left" }, 500);
        $('#europa-view, #italia-view').removeClass('active');
        $('#emilia-view').addClass('active');
    });
});

Demo ​

Answer 1

试试这个:

Javascript:

// Sliding content navigation
var active = ".active"
$('a.sharedClass').click(function() {
    var name = $(this).attr('name');
    $(active).hide("slide", { direction: "left" }, 500).removeClass('active');

    $('#' + name).delay(500).show("slide", { direction: "left" }, 500)
                 .addClass('active');
});​

​ 列表的新 HTML:

<div id="view-navigator">
    <ul id="view-list">
        <li class="europa"><a href="#" class="europa sharedClass" name="europa-view">europa</a></li>
        <li class="italia"><a href="#" class="italia sharedClass" name="italia-view">italia</a></li>
        <li class="emilia"><a href="#" class="emilia sharedClass" name="emilia-view">emilia-romagna</a></li>
    </ul>
</div>

演示:http://jsfiddle.net/maniator/Tbrvv/