Question

如果你点击其中一个页面，我会在一个使用show / hide（如标签）的页面上有一个工作的clickevent处理程序（不知道它是否是正确的单词）链接。这完美地运作，但现在我走进另一个问题。

当我从其他页面链接到其中一个标签时，例如。 / page-slug /＃tabtoshow它不会显示正确的选项卡，它只显示第一个（打开）选项卡。当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");
});

提前致谢!!

Answer 1

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

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

Answer 2

你的代码有些重复，我为你写了一个更通用的版本。另外，我使用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单击事件

2 个答案: