本文主要是介绍Firefox下使用tab键跳转锚点无效的解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在无障碍设计中，对于视障人群我们的网页要能使用键盘和屏幕阅读器来操作，在近期开发的网页中，遇到了firefox下使用tab键和shift tab键进行上下切换的时候，锚点不能正确跳转的问题，经过一番折腾，终于解决了，特此记录以备后用。
一 场景
左边有一行热点话题，当用户点击某个热点的连接时，跳转到对应的热点内容上，并自动focus到热点内容的某个button上。我们快速的写下了第一版的代码，如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>firefox anchor not focus</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>body {font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";}ul,li,a {padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}.main {display: flex;}ul {width: 600px;}ul > li {margin-bottom: 20px;}h2, .toggle-btn {display: inline;}.content {display: none;}.toggle-btn + .active {display: block;}
</style>
<script>$(document).ready(function(){$('.toggle-btn').on('click', function(){var content = $(this).siblings('.content');if(!content.hasClass('active')){ content.addClass('active');$(this).text('hide');} else {content.removeClass('active');$(this).text('display');}})})
</script>
<body><h1>使用tab和shift + tab键进行上下切换</h1><div class="main"><ul><li><a href="#content_1">Go to content 1</a></li><li这篇关于Firefox下使用tab键跳转锚点无效的解决方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
