Question

我有7个标签

<div class="header">
    <input id="example1" type="submit" name="script"  value="Tab 1">
    <input id="example2" type="submit" name="script"  value="Tab 2">
    <input id="example3" type="submit" name="script"  value="Tab 3>
    <input id="example4" type="submit" name="script" value="Tab 4">
    <input id="example5" type="submit" name="script"  value="Tab 5">
    <input id="example6" type="submit" name="script"  value="Tab 6">
    <input id="example7" type="submit" name="script"  value="Tab 7">
</div>
<div id="outputs">
    <div id="output1" style="height:auto; text-align:left;">Some long text</div>
    <div id="output2" style="height:auto; text-align:left;">Some long text</div>
    <div id="output3" style="height:auto; text-align:left;">Some long text</div>
    <div id="output4" style="height:auto; text-align:left;">Some long text</div>
    <div id="output5" style="height:auto; text-align:left;">Some long text</div>
    <div id="output6" style="height:auto; text-align:left;">Some long text</div>
    <div id="output7" style="height:auto; text-align:left;">Some long text</div>
</div>

jquery代码

$("#example1").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("#output1").position().top - 135;

    $("html, body").animate({
        scrollTop: val
    }, 800);
});
$("#example2").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("#output2").position().top - 89;
    $("html, body").animate({
        scrollTop: val
    }, 800);
});
$("#example3").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("div#output3").position().top - 89;
    $("html, body").animate({
        scrollTop: val
    }, 800);
});
$("#example4").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("div#output4").position().top - 89;
    $("html, body").animate({
        scrollTop: val
    }, 800);
});
$("#example5").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("#output5").position().top - 89;
    $("html, body").animate({
        scrollTop: val
    }, 800);
});
$("#example6").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("#output6").position().top - 89;
    $("html, body").animate({
        scrollTop: val
    }, 800);
});
$("#example7").click(function() {
    $(".single-scroll").removeClass("active");
    $(this).addClass("active");
    var val = $("#output7").position().top - 89;
    $("html, body").animate({
        scrollTop: val
    }, 800);
});

CSS代码

    .active{
      color:blue;
    }

我已经尝试了上面的代码，但它无法正常工作。滚动时不会添加活动类。

header div是固定的。当点击example1时，窗口必须滚动到output1，当点击example2时，窗口必须滚动到output2，

与所有5个按钮类似，窗口必须根据序列号移动到相应的div，并且必须单击active类添加到单击的选项卡。

类似地滚动窗口（而不是单击），如果div = output4＆＃34;如果存在，则必须将active类添加到example4。

我正在寻找与this

相同的功能

Answer 1

关于Mohit提供的Demo，在中心确切的div对齐并突出显示上面的标签。

您需要使用下面的

编辑jsfiddle代码

if ($(this).offset().top > cutoff+200)

滚动到div并将活动类添加到当前div的选项卡

1 个答案: