我正在使用Bootstrap 4.0在导航栏上工作.我有一个药盒导航栏,我写了一个
javascript函数来自动检测当前页面并将活动类添加到正确的药丸盒.我将函数设置为在DOM准备就绪时运行,但它在加载BODY中的任何HTML之前运行.本质上,脚本无法在运行时找到任何带有“nav-link”类的元素,并且什么都不做.但是,如果我将async属性添加到脚本中,它将按预期工作.
function main () { $nav = $('nav-link'); $('.nav-link').each( function () { var currentPage = location.href.split("/").slice(-1); var currentLink = $(this).attr('href').slice(2); console.log(currentPage); console.log(currentLink); if (currentLink == currentPage) { $(this).addClass('active'); } else { $(this).removeClass('active'); } }); } $(document).ready(main());
这是我的HTML文件.
<html lang="en"> <head> <!-- required Meta tags --> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <title>Home</title> <!-- Library CDNs --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <!-- Custom JS --> <script async type="text/javascript" src='checkNavActive.js'></script> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <!-- Custom CSS --> <link rel="stylesheet" href="./wikiCSS.css"> </head> <body> <div> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href=".\Home.html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href=".\DryLab.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DryLab</a> <div class="dropdown-menu"> <a class="dropdown-item" href=".\DryLab.html" >DryLab</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href=".\WetLab.html">WetLab</a> </li> </ul> </div> <div class="container title"> <div class="row"> <div class="col text-center"> <h1>Home</h1> </div> </div> </div> </body>
解决方法
使用$(document).ready(main())然后调用main()函数.你应该使用$(document).ready(main)
function main() { $nav = $('nav-link'); $('.nav-link').each(function() { var currentPage = location.href.split("/").slice(-1); var currentLink = $(this).attr('href').slice(2); console.log(currentPage); console.log(currentLink); if (currentLink == currentPage) { $(this).addClass('active'); } else { $(this).removeClass('active'); } }); } $(document).ready(main);
<html lang="en"> <head> <!-- required Meta tags --> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,shrink-to-fit=no"> <title>Home</title> <!-- Library CDNs --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <!-- Custom JS --> <script async type="text/javascript" src='checkNavActive.js'></script> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <!-- Custom CSS --> <link rel="stylesheet" href="./wikiCSS.css"> </head> <body> <div> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href=".\Home.html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href=".\DryLab.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DryLab</a> <div class="dropdown-menu"> <a class="dropdown-item" href=".\DryLab.html">DryLab</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href=".\WetLab.html">WetLab</a> </li> </ul> </div> <div class="container title"> <div class="row"> <div class="col text-center"> <h1>Home</h1> </div> </div> </div> </body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。