Question

我正在尝试创建“跳过导航”链接而无法使用锚点。该网站以一种特殊的方式构建，其中重新定位了锚链接格式。所以，我试图让人们通过使用焦点跳过导航。但是，它无法正常工作。

跳过导航链接本身的HTML代码：

<!-- Start Top Left in Nav Bar -->
<aside>
<a href="" onClick="javascript:skipNav()" tabindex="1" id="skipNav" role="link">Skip Navigation</a>
</aside>
<!-- End Top Left in Nav Bar -->

更改焦点的代码

var nav = document.getElementById('#skipNav');
nav.onclick=skipNav();

function skipNav(){
     document.activeElement.blur();

    if ($('#linkHome').hasClass('current')==true)
    {
        $('#homeFocus').focus();
    }
    if ($('#linkTeam').hasClass('current')==true)
    {
        $('#teamFocus').focus();
    }
    if ($('#linkTraining').hasClass('current')==true)
    {
        $('#trainingFocus').focus();
    }
    if ($('#linkTesting').hasClass('current')==true)
    {
        $('#testingFocus').focus();
    }
    if ($('#linkRemediation').hasClass('current')==true)
    {
        $('#remediationFocus').focus();
    }
    if ($('#linkContact').hasClass('current')==true)
    {
        $('#contactFocus').focus();
    }

};

更改页面和标记当前页面的脚本

var FluidNav = {
init: function() {
    $('a[href*="#"]').click(function(e) {
        e.preventDefault();
        if($(this).attr("href").split("#")[1]) {
            FluidNav.goTo($(this).attr("href").split("#")[1]);
        }
    });
    this.goTo("home");
},
goTo: function(page) {
    var next_page = $("#"+page);
    var nav_item = $('nav ul li a[href=#'+page+']');
    $("nav ul li").removeClass("current");
    nav_item.parent().addClass("current");
    FluidNav.resizePage((next_page.height() + 40), true, function() {
         $(".page").removeClass("current"); next_page.addClass("current"); 
    });
    $(".page").fadeOut(500);
    next_page.fadeIn(500);
    document.activeElement.blur();
    $('#'+page+'Focus').focus();

    FluidNav.centerArrow(nav_item);

},
centerArrow: function(nav_item, animate) {
    var left_margin = (nav_item.parent().position().left + nav_item.parent().width()) + 24 - (nav_item.parent().width() / 2);
    if(animate != false) {
        $("nav .arrow").animate({
            left: left_margin - 8
        }, 500, function() { $(this).show(); });
    } else {
        $("nav .arrow").css({ left: left_margin - 8 });
    }
},
resizePage: function(size, animate, callback) {
    if(size) { var new_size = size; } else { var new_size = $(".page.current").height() + 40; }
    if(!callback) { callback = function(){}; }
    if(animate) {
        $("#pages").animate({ height: new_size }, 400, function() { callback.call(); }); 
    } else {
        $("#pages").css({ height: new_size }); 
    }
}
};

 $("nav select").change(function() {
    if(this.options[this.selectedIndex].value != "#") {
        var page = this.options[this.selectedIndex].value.split("#")[1];
        FluidNav.goTo(page);
        $("html,body").animate({ scrollTop:$('#'+page).offset().top }, 700);
    }
});

有什么想法吗？

Answer 1

听起来你正试图做一个'动态跳过链接'，你在运行时确定目标？

<a href="" onClick="javascript:skipNav()" tabindex="1" id="skipNav" role="link">Skip Navigation</a>

问题是当您点击链接时，会发生导航。 href=""不会阻止导航，只是意味着您最终导航到当前页面 - 这将重置焦点。这发生在您的点击事件处理程序之后因此，即使您可以正确地将焦点设置在您想要的位置，它也会在页面重新加载时“丢失”。

有几种方法可以防止这种情况：一种是使用href="javascript:void(0)" - href指定导航的位置，如果评估为无效，浏览器根本不会导航。

更简洁的方法是告诉浏览器不要在事件处理程序中执行默认操作：

function skipNav(e)
{
    e.preventDefault(); // prevent default action - link navigation - from taking place
    ...

-

代码中的其他几个问题：

不要为role="link"上的A而烦恼 - 保存这些属性，以便在您做一些与众不同的事情时。要知道的关键是屏幕阅读器已经知道如何以标准方式使用所有标准HTML元素。因此，如果您使用链接或按钮作为按钮，则无需添加角色。

但是如果您正在创建普通DIV的新控件，或者您正在重新利用HTML元素以用于其他用途，那么您需要一个角色属性来告诉屏幕阅读器您实际的方式使用元素。

例如，有一个onclick处理程序并且表现得像按钮的DIV需要role =“button”，否则屏幕阅读器可能会忽略它或只是说像'element'这样的泛型。或者，如果您要从A标签创建一个按钮，并且从用户的角度来看它的行为类似于按钮，那么您需要使用role =“button”，以便屏幕阅读器将其宣布为按钮而不是作为一个链接。

-

注意混合普通DOM与jQuery约定 - 只有jQuery使用＃来按ID查找元素，因此请使用：

var nav = document.getElementById('skipNav'); // plain DOM way, no #

或

var nav = $('#skipnav'); // jQuery way using selector

-

注意函数作为值与调用：

nav.onclick=skipNav();

这实际上是调用 skipNav()，并指定返回值 - null！ - onclick。在设置回调时不要使用（）。无论如何，您不需要此代码，因为您无论如何都要使用标签中的onClick来设置处理程序。

另外，请注意，当你的代码代表时，当调用skipNav（）时，它会尝试调用document.activeElement.blur（） - 但是在那个时间点 - 文档仍在加载 - 没有activeElement，所以调用模糊（）on null生成一个异常 - 你应该在浏览器的控制台/调试窗口中看到它。

-

不要使用.blur（） - 不需要这样做：

 document.activeElement.blur();

相反，只需聚焦您想要聚焦的元素。做.blur（）的危险在于，如果之后的代码无法将焦点设置在合理的位置，焦点将最终变得“丢失”，这对于键盘用户来说非常不方便，因为他们必须从一开始就选择标签。页面。

-

Javascript编码实践：不要在if（）表达式中使用== true;除非您希望您希望不止一个元素具有“当前”类，否则请使用else if而不是普通if：这会在代码中明确表示您只期望一个分支使用。

-

最后，与浏览器的调试器（大多数是F12）交朋友：通过在事件处理程序和初始化代码中加入断点，然后逐步执行它以确保它的行为符合您的预期，您将学习上述内容。 / p>

“跳过导航”链接没有锚点

1 个答案: