1

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

跳过导航链接本身的 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);
    }
});

有任何想法吗？

4

1 回答 1

2

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

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

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

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

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

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

--

代码的其他几个问题：

不用担心- 保存这些属性role="link"以A备不时之需。要知道的关键是屏幕阅读器已经知道如何处理以标准方式使用的所有标准 HTML 元素。因此，如果您使用 an 作为链接或 a 作为按钮，则无需添加角色。

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

例如，具有 onclick 处理程序并且行为类似于按钮的 DIV 需要 role="button"，否则屏幕阅读器可能会忽略它或只说一些通用的东西，例如“元素”。或者，如果您正在从 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 设置处理程序。

另外，请注意，就您的代码而言，当调用 skipNav() 时，它会尝试调用 document.activeElement.blur() - 但在那个时间点 - 文档仍在加载 - 没有 activeElement，因此调用 blur() null 会生成一个异常 - 您应该在浏览器的控制台/调试窗口中看到它。

--

不要使用 .blur() - 没有必要这样做：

 document.activeElement.blur();

相反，只需关注您想要关注的元素。使用 .blur() 的危险在于，如果之后的代码未能将焦点设置在合理的位置，焦点最终会“丢失”，这对键盘用户来说非常不方便，因为他们必须从这页纸。

--

Javascript 编码实践：不要== true在 if() 表达式中烦恼；除非您希望多个元素具有“当前”类，否则请使用else if而不是 plain if：这在代码中清楚地表明您希望只使用一个分支。

--

最后，与浏览器的调试器（大多数情况下是 F12）交朋友：您将通过在事件处理程序和初始化代码中放置断点并单步执行以确保其行为符合您的预期来了解上述一些内容。

于 2012-06-12T07:18:25.007 回答