我正在使用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>I'm working on a nav bar using Bootstrap 4.0. I have a pillbox nav bar and I wrote a javascript function to automatically detect the current page and add the active class to the right pillbox. I set the function to run when the DOM is ready but it runs before any of the HTML in the BODY is loaded. Essentially the script fails to find any elements with the 'nav-link' class at runtime and does nothing. If I add the async attribute to the script however, it works as expected.
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());This is my HTML file.
<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, 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>Using $(document).ready(main()) calls the main() function then and there. You should be using $(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, 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>
更多推荐
发布评论