Question

这个问题有点难以解释但是这里有。我的页面上有不同的编程语言示例。不同的例子向您展示如何创建汽车＆＃34;，＆＃34;删除汽车＆＃34;，＆＃34;更新汽车＆＃34; ......每个示例都有一个标签从php示例切换到curl示例。

问题是当切换标签显示不同的语言时，内容的长度会发生变化，因此您最终会进入页面的不同位置。

切换标签时，如何让用户查看相同的示例？

$(".create_car_example").change(function(){
    $(".create_code").removeClass("selected");
    $(".create_code_" + $(this).val().toLowerCase()).addClass("selected");
    //$(this).val() <-- changes to either 'php' or 'curl'
});

Answer 1

$(".create_car_example").change(function(){

    var pre_top = this.getBoundingClientRect().top;

    $(".create_code").removeClass("selected");
    $(".create_code_" + $(this).val().toLowerCase()).addClass("selected");
    //$(this).val() <-- changes to either 'php' or 'curl'

    var post_top = this.getBoundingClientRect().top;

    if(pre_top > post_top){
        var diff_top = pre_top - post_top;
        new_top = window.scrollY - diff_top;
    }

    if(pre_top < post_top){
        var diff_top = post_top - pre_top;
        var new_top = window.scrollY + diff_top;
    }

        window.scrollTo(0, new_top);

});

Javascript内容更改但保留在同一位置

1 个答案: