javascript – $(document).ready在加载DOM之前触发

我正在使用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>

javascript – $(document).ready在加载DOM之前触发

解决方法

相关文章