顯示 Bootstrap 屏幕閱讀器信息的網站（不應該出現時）
[英]Website displaying Bootstrap Screen Reader info (when it shouldn't be)
問題描述
我正在構建一個新站點，使用我為舊站點編寫的一些代碼，但合並了一些稍微復雜的 PHP 包含，並且代碼在兩個站點上的行為似乎有所不同。
我在兩者中都有一個引導導航欄，它應該自動突出顯示活動頁面。 我正在從 .php 布局文件加載導航欄，該文件檢測哪個頁面已打開並插入正確的鏈接：
if($currentpage=="/rehearsal.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/rehearsal.php">Rehearsal<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/rehearsal.php">Rehearsal</a></li>';
}
但是，在新網站上，我得到以下信息（排練應突出顯示為黑色，而不是旁邊有（當前））：
使用以下頁面源：
然而，另一個站點按預期顯示但具有相同的頁面源布局：
我猜代碼中的其他地方必須指定這種行為，但我不確定在哪里看。 我試過在站點之間移動 inlude 格式，但問題仍然存在。 這是有問題的布局模板的代碼：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="room4.css">
<title><?=$title?></title>
</head>
<body>
<header>
<h1>Room4 Studios</h1>
</header>
<div>
<?php
$currentpage = $_SERVER['REQUEST_URI'];
?>
<nav class="navbar navbar-expand-md navbar-light" style="background-color: #68B3E2;">
<a class="navbar-brand" href="#"><img class="header_logo" src="images/logo.png" width="120" height="120" alt="..."></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<?php if($currentpage=="/index.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/index.php">Home<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/index.php">Home</a></li>';
}
if($currentpage=="/rehearsal.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/rehearsal.php">Rehearsal<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/rehearsal.php">Rehearsal</a></li>';
}
if($currentpage=="/recording.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/recording.php">Recording<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/recording.php">Recording</a></li>';
}
if($currentpage=="/video.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/video.php">Video<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/video.php">Video</a></li>';
}
if($currentpage=="/hire.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/hire.php">Hire<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/hire.php">Hire</a></li>';
}
if($currentpage=="vouchers.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="vouchers.php">Gift Vouchers<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="vouchers.php">Gift Vouchers</a></li>';
}
if($currentpage=="/contact.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/contact.php">Contact<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/contact.php">Contact</a></li>';
}
if($currentpage=="/blog.php")
{echo '<li class="nav-item active">
<a class="nav-link" href="/blog.php">Blog<span class="sr-only">(current)</span></a></li>';
} else {
echo '<li class="nav-item">
<a class="nav-link" href="/blog.php">Blog</a></li>';
}
?>
</ul>
<a class="right_btn btn-primary btn-lg" href="/booknow.php" role="button">BOOK NOW</a>
</div>
</div>
<main>
<?=$output?>
</main>
<footer>
© IJDB 2017
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->
</body>
</html>
這是我從公共網站引用它的方式：
<?php
$title = 'Room4 Studios';
ob_start();
include __DIR__ . '/../templates/rehearsal.html.php';
$output = ob_get_clean();
include __DIR__ . '/../templates/layout.html.php';
任何幫助或見解將不勝感激
1 個解決方案
解決方案1
0 2021-07-19 14:23:00
如果這對任何人都有幫助，問題是我使用的是為 Bootstrap 4 編寫的代碼，並鏈接了 Bootstrap 5。
.sr-only 現在是 .visually-hidden
&
現在從 <a 標簽而不是 <li 標簽中引用活動導航欄：
<a class="nav-link active">
而不是
<a class="nav-link active">
數組不應該顯示在另一個數組中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.