Question

我必须以选项卡式样式创建导航栏，并且在调用特定页面时，应将导航链接标记为活动

此页面正在使用bootstrap，所以我正在使用javascript通过id选择一个元素（此处为NA1）并将其属性“ class”设置为“ 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>

我希望此代码在小屏幕和大屏幕上均适用，但这仅在大屏幕上适用。切换到小屏幕时，导航链接或导航选项卡不会显示为活动状态。强文本

在静态多页站点中加载页面时，如何将导航链接标记为活动

0 个答案: