There seem to be some problems with tabindex in several browsers so I want to work around these issues using javascript/jquery. Specifically FF3.5 (Mac) doesn't accept tabindex or focus on links at all. I have jquery 1.3.2 and js-hotkeys 0.7.9 running on my website.
I have 4 forms on 1 page which I can switch between using a link. Now when the page loads I what 1 of the links to have the focus using it's id. Then I want to be able to tab between each link to display each form.
Stripped down code looks like this:
HTML
<nav id="postNav">
<ul>
<li class="Nav1"><a href="#">1</a></li>
<li class="Nav2"><a href="#">2</a></li>
<li class="Nav3"><a href="#">3</a></li>
<li class="Nav4"><a href="#">4</a></li>
</ul>
</nav>
<form class="postForm" id="post1">
</form>
<form class="postForm" id="post2">
</form>
<form class="postForm" id="post3">
</form>
<form class="postForm" id="post4">
</form>
Jquery
$(document).ready(function(){
$("#postNav ul li a").click(function(event){
var postOptionSelected = $(this).parent("li").attr("class").substr(3);
$("form#post"+postOptionSelected).show();
$("form.postForm:not(#post"+postOptionSelected+")").hide();
event.preventDefault();
});
});