Мне нужно создать панель навигации в стиле вкладок, и когда вызывается определенная страница, тогда навигационная ссылка должна быть помечена как активная
Эта страница использует начальную загрузку, поэтому я использую javascript, чтобы выбрать элемент по id (здесь это NA1) и установить его атрибут "class" как "активный"
<!DOCTYPE html>
<html lang="en">
<head>
<title>learning stiching of web pages</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="../bootstrapCSS/bootstrap.css"> -->
<link rel="stylesheet" href="Templets/HeaderTemp.css">
<script>
window.onload = function () {
if (window.innerWidth < 560) {
document.getElementById("brandHdr").setAttribute("class", "brand p-0");
//use only if less items in nav removed nav-tabs and nav-justified classes
document.getElementById("topNav").setAttribute("class", "nav hover bg-light p-0");
}
//change id for every page
document.getElementById("NA1").setAttribute("class", "nav-item nav-link active");
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 headerCol">
<div class="headerParentDiv ">
<div class="mainHdrDiv ">
<h2 id="brandHdr" class="brand p-2">ostrich egg learning</h2>
<p class="subBrand">keep updated with latest jobs and exams</p>
</div>
<nav id="topNav" class="nav nav-tabs bg-light nav-justified p-1">
<a id="NA1" class="nav-item nav-link" href="HeaderTemplet.html">Home</a>
<a id="NA2" class="nav-item nav-link" href="">PDFs</a>
<a id="NA3" class="nav-item nav-link" href="Templets/ListTemplet.html">math</a>
<a id="NA4" class="nav-item nav-link" href="Templets/ListTemplet.html">physics</a>
<a id="NA5" class="nav-item nav-link" href="">sst</a>
<a id="NA6" class="nav-item nav-link" href="">Results</a>
<a id="NA7" class="nav-item nav-link" href="">computer</a>
</nav>
</div>
<hr><br>
<hr>
</div>
</div>
</div>
<!-- start second container from here -->
</body>
</html>
Я ожидаю, что этот код будет работать как для маленьких, так и для больших экранов, но он работает только на больших экранах.
При переключении на небольшой размер экрана навигационные ссылки или навигационные вкладки не отображаются как активные. сильный текст