javascript - 使左列根据选择移动？

Question

我在以下 URI 中遇到了一个 jQuery Wizard 插件：

http://www.techlaboratory.net/labs/SmartWizard/wizard-vertical.htm

虽然它符合我的目的，但我正在努力实现一件小事。如果我添加超过 5 个步骤，显然并非所有步骤都可见。相反，当单击下一步时，我试图将所选步骤居中。例如，如果我单击第 2 步，左侧显示第 2 步的框应该居中。有人可以建议一个好方法吗？

Answer 1

我制作了一个 jsFiddle： http: //jsfiddle.net/elektronikLexikon/xWmhh/
它适用于以下代码：

$('.wiz-container').smartWizard();

var ul_height = 400; // default: 400
var link_height = 80; // default: 80

$("#wizard-anchor li a, .btn.next, .btn.back").click(function() {
    if($("#wizard-anchor li").length > 5) {
        var ul_top = $("#wizard-anchor").offset().top;
        var current_top = $(".wiz-anc-current").offset().top-ul_top;
        var first_top = $("#wizard-anchor li:first").offset().top;
        var last_top = $("#wizard-anchor li:last").offset().top;
        if((current_top > ul_height/2-link_height/2 && last_top > ul_height) || (current_top < ul_height/2+link_height/2 && first_top < 0)) {
            $("#wizard-anchor").animate({
                "margin-top": 160-current_top
            }, 700);
        }
    }
});

不幸的是，它只是通过单击按钮起作用，当您单击左栏中的已完成步骤时，会发生奇怪的事情。