所以我遇到了一个问题，由于某种原因，您无法使用 Tab 键从我的 Bootstrap 导航栏中选择下拉菜单？我担心这意味着使用屏幕阅读器的人将无法浏览该网站。它似乎适用于其他 Bootstrap 网站，所以我不知道出了什么问题。
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>yiskah @ spooky camp</title>
<!-- CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/navbar-static-top.css" rel="stylesheet">
<link href="../css/bootstrap-accessibility.css" rel="stylesheet">
<link href="../css/default.css" rel="stylesheet">
</head>
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../index.html">brand</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="../index.html">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Projects<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="../sorry">Robo-Apologizer</a></li>
<li><a href="../photoshop">Photoshop Idea Generator</a></li>
<li><a href="../diviii">Div III Generator</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Written Work<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="../lexrep">Lexical Replacement</a></li>
<li><a href="../mannequin">Mannequin Allies</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">@Elsewhere <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a>(links to social profiles)</a></li>
<li><a>(one of my social links is here)</a></li>
<li class="divider"></li>
<li class="dropdown-header">Contact</li>
<li><a>(one of my emails goes here)</a></li>
<li><a>(I put another email here)</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
我没有修改任何默认的 Bootstrap 代码。我在尝试实现导航栏的其他网站上遇到了这个问题。但它在 bootstrap 网站上的示例上运行良好吗？
有什么想法吗？
最佳答案
所有下拉切换 anchor 上都缺少 href 属性。 请参阅this bootply对于固定版本。
这个:
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Projects<span class="caret"></span></a>
需要是这样的:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Projects<span class="caret"></span></a>
或者这个:
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Projects<span class="caret"></span></a>
或者这个:
<a tabindex="0" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Projects<span class="caret"></span></a>
关于jquery - 无法在 Bootstrap 导航栏中通过 Tab 键选择下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28622506/