javascript - "Skip Navigation" Link without anchors -

i trying create "skip navigation" link without being able use anchors. site built in peculiar way, anchor link formatting has been re-purposed. so, attempting allow people skip navigation using focus. however, isn't working.

html code skip navigation link itself:

<!-- 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 --> 

code change focus

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();     }  }; 

script change pages , mark current page

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);     } }); 

any ideas?

sounds you're trying 'dynamic skiplink', determine target @ runtime?

<a href="" onclick="javascript:skipnav()" tabindex="1" id="skipnav" role="link">skip navigation</a> 

the problem when click link, navigation happens. href="" doesn't prevent navigation, means end navigating current page - , that's going reset focus. happens after click event handler. though may correctly set focus want to, ends being 'lost' when page reloads.

there's couple of ways prevent this: 1 use href="javascript:void(0)" - href specifies navigate, , if evaluates void, browser won't navigate @ all.

a cleaner way tell browser not carry out default action in event handler:

function skipnav(e) {     e.preventdefault(); // prevent default action - link navigation - taking place     ... 

--

couple of other issues code:

don't bother role="link" on a - save these attributes when doing out of ordinary. key thing know screenreaders know how deal standard html elements when used in standard way. if using link, or button, don't need add role.

but if creating new control of of plain divs, or if repurposing html element different use, need role attribute tell screenreader how actually using element.

for example, div that's had onclick handler , behaving button need role="button", otherwise screenreader might ignore or generic 'element'. or if creating button tag, , ends behaving , looking button user's point of view, you'd need role="button" screenreader announce button rather link.

--

watch mixing plain dom vs jquery conventions - jquery uses # find elements id, use either:

var nav = document.getelementbyid('skipnav'); // plain dom way, no # 

or

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

--

watch functions values vs calls:

nav.onclick=skipnav(); 

this call skipnav(), , assign return value - null! - onclick. don't use ()'s when you're setting callback. don't need code anyhow, since you're setting handler using onclick in tag anyhow.

also, note code stands, when skipnav() called, tries call document.activeelement.blur() - @ point in time - document still loading - there's no activeelement, calling blur() on null generates exception - should see in browser's console/debugging window.

--

don't use .blur() - there's no need this:

 document.activeelement.blur(); 

instead, focus element want have focus. danger doing .blur() if code after fails set focus somewhere reasonable, focus end getting 'lost', inconvenient keyboard user, since have tab start of page.

--

javascript coding practice: don't bother == true in if() expressions; , unless expect expect more 1 of elements have 'current' class, use else if instead of plain if: makes clear in code you're expecting 1 branch used.

--

finally, make friends browser's debugger (f12 in most): you'll learn of above putting breakpoints in event handler , initialization code, , stepping through ensure it's behaving expect.