javascript - 如何简化以下功能？

我可以使用下面的代码块来实现内容切换器，但我正在寻找一种简化方法。最多可以切换10个或更多主题，如何简化它以使代码不会太大，而不是每个DIV都有一个代码块。

jQuery(document) .ready(function () {
    $('.topic-intro:not(:nth-of-type(1))') .hide();
    $('#mid-nav-in ul li:nth-of-type(1)') .addClass('active');
    $('#mid-nav-in ul li a:nth-of-type(1)') .click(function () {
        $('.topic-intro:not(:nth-of-type(1))') .hide();
        $('.topic-intro:nth-of-type(1)') .show();
        $('#mid-nav-in ul li:not(:nth-of-type(1))') .removeClass('active');
        $('#mid-nav-in ul li:nth-of-type(1)') .addClass('active');
    });
});
jQuery(document) .ready(function () {
    $('#mid-nav-in ul li:nth-of-type(2) a') .click(function () {
        $('.topic-intro:not(:nth-of-type(2))') .hide();
        $('.topic-intro:nth-of-type(2)') .show();
        $('#mid-nav-in ul li:nth-of-type(2)') .addClass('active');
        $('#mid-nav-in ul li:not(:nth-of-type(2))') .removeClass('active');
    });
});

最佳答案

从您的代码中可以看出，您正在使用#mid-nav-in中的链接来显示相应的.topic-intro，然后隐藏所有其他链接。看起来代码也依赖于.topic-intro元素，其顺序与#mid-nav-in中的链接相同。如果是这种情况，则可以执行以下操作：

$('#mid-nav-in li a').on('click', function(){
    // Remove 'active' Class from all <li/>
    $('#mid-nav-in li').removeClass('active');

    // Add 'active' Class to <li/> of Clicked Link
    $(this).closest('li').addClass('active');

    // Hide All .topic-intro elements
    $('.topic-intro').hide();

    // Show .topic-intro element at the Same index of Clicked Link
    $('.topic-intro').eq($(this).closest('li').index()).show();

    return false; // prevent default action
});

// Automatically Select the First Link
$('#mid-nav-in li a').eq(0).trigger('click');

这是一个小提琴作为示例：http://jsfiddle.net/6hd97/2/

我希望这有帮助。

关于javascript - 如何简化以下功能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22999828/