Javascript 来自不同页面的jQuery clickevent

我有一个正常工作的clickevent处理程序，如果你点击其中一个页面链接，我不知道它在使用类似显示/隐藏选项卡的页面上是否合适。这很好用，但现在我进入另一个问题

当我从另一个页面链接到一个选项卡时，例如/page slug/tabt显示它不会显示正确的选项卡，它只显示第一个打开的选项卡。当URL包含相同的id时，我希望它显示正确的选项卡，例如tabtoshow。选项卡将具有与链接相同的id

这是我目前的剧本

$(function() {
    $(".elevator a").click(function(evt) {
        evt.preventDefault();
    });
});        
$(document).ready(function() {
    $('a[href="#ondernemen"]').click(function() {
        $(".active").removeClass("active");
        $(this).parent('.label').addClass("active");
        $('#ondernemen').slideDown(1000);
        $('#ontdekken').slideUp(1000);
        $('#groeien').slideUp(1000);
        $('#spelen').slideUp(1000);
    });
    $('a[href="#groeien"]').click(function() {
        $(".active").removeClass("active");
        $(this).parent('.label').addClass("active");
        $('#groeien').slideDown(1000);
        $('#ontdekken').slideUp(1000);
        $('#ondernemen').slideUp(1000);
        $('#spelen').slideUp(1000);
    });
    $('a[href="#spelen"]').click(function() {
        $(".active").removeClass("active");
        $(this).parent('.label').addClass("active");
        $('#spelen').slideDown(1000);
        $('#ontdekken').slideUp(1000);
        $('#groeien').slideUp(1000);
        $('#ondernemen').slideUp(1000);
    });
    $('a[href="#ontdekken"]').click(function() {
        $(".active").removeClass("active");
        $(this).parent('.label').addClass("active");
        $('#ontdekken').slideDown(1000);
        $('#spelen').slideUp(1000);
        $('#groeien').slideUp(1000);
        $('#ondernemen').slideUp(1000);
    });
    $('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
        }
    })
    $('a[href="#ontdekken"]').parent('.label').addClass("active");
});

---

提前谢谢

如果要移动到另一个物理页面，而不是虚拟页面，则需要处理新页面上的哈希。您需要访问.hash或location.pathname，并根据hash值执行某些操作。您可以用类似的方式处理它：

$(document).ready(function() {
    displayTab(location.hash);
});

---

您的代码有一些重复，我已经为您编写了一个更通用的版本。此外，我还使用location.hash来确定要激活的选项卡

$(document).ready(function() {
    var selector = "#ondernemen, #ontdekken, #groeien, #spelen";
    $(".elevator a").click(function(evt) {
        evt.preventDefault();
    });
    $(selector).click(function() {
        var that = this;
        $(".active").removeClass("active");
        $(this).parent('.label').addClass("active");
        $(selector).each(function() {
            if ($(this).attr("id") !== $(that).attr("id")) {
                $(this).slideUp(1000);
            }
        });
        $(this).slideDown(1000);
    });
    $('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
        }
    });
    $(location.hash).parent('.label').addClass("active");
});

---

你在使用jQuery用户界面吗？是的@CameronTinker，我很感谢你的时间Lajos！不幸的是，这不起作用，因为有些元素需要向下滑动。使用此代码，它们只会向上滑动。也许最好快速浏览一下网站，这样你就可以了解我的“标签导航”是如何工作的了？正确的页面是www.gastouderfabriek.nl/trainingen/I认为我们需要为每个元素添加此元素，比如如果$'a[href=spelen]'。单击函数，如果$location.hash具有正确的属性，则使用slideUp和slideDown进行操作。你也这么认为吗？只是，我不知道如何编码这个。。。你能帮我一下吗？我刚刚看到你的评论。当我回答时，我很累，所以我没有看到你正在调用slideDown函数。另外，请注意，你的dynamic-captions.css加载失败，你可能会丢失一些设计。另外，给你的锚一些ID，通过href选择它们也很麻烦，从您的代码中，我们可以看到您假设它们具有ID，例如：$'ondernemen'。slideDown1000；，但他们没有。因此，修复您的html将ID添加到锚，应用我的代码并修复它（如果需要），如果我没有测试它，请更正您对css文件的引用，然后返回这里并告诉我们发生了什么：