Question

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

Answer 1

然后使用$(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>

Answer 2

您应该使用$(main)，这是$(document).ready(main)的缩写。

您的语法正在执行main函数而不是传递它，这就是您遇到问题的原因。

$（document）.ready在加载DOM之前触发

2 个答案: