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

我正在使用Bootstrap 4.0在导航栏上工作。我有一个碉堡导航栏，我编写了一个 javascript 函数来自动检测当前页面并将活动类添加到右侧的碉堡。我将函数设置为在 DOM 准备就绪时运行，但它在加载 BODY 中的任何 HTML 之前运行。本质上，脚本无法在运行时找到带有"nav-link"类的任何元素，并且什么也不做。但是，如果我将异步属性添加到脚本中，它会按预期工作。

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, 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>

你应该只使用$(main)，这是$(document).ready(main)的简写。

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

相关内容

最新更新

热门标签：