$（document）.ready在加載DOM之前觸發

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 個解決方案

解決方案1
4 已采納 2017-08-20 17:37:16

解決方案2
3 2017-08-20 17:37:44

$（document）.ready在加載DOM之前觸發

問題描述

2 個解決方案

解決方案1 4 已采納 2017-08-20 17:37:16

解決方案2 3 2017-08-20 17:37:44

解決方案1
4 已采納 2017-08-20 17:37:16

解決方案2
3 2017-08-20 17:37:44