I have to create a navigation bar in a tabbed style, And when a specific page is called then the navigation link should be marked as active
This page is using bootstrap ,so i am using javascript to pick an element by id (here this is NA1) and set its attribute "class" as "active"
```
<!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>
```
I am expecting this code to work for both small and large screens but this is is only working on large screens. When switching to small screen size then nav links or nav tabs are not showing as active.strong text
Aucun commentaire:
Enregistrer un commentaire