javascript - 无法将活动类添加到导航元素,导航是从另一个 .html 文件导入的
问题描述
这是我尝试实现 HTML/CSS 网站的第一次飞跃,所以请考虑到这一点。
我有多个 .html 页面,它们使用 jQuery 函数(我猜?)从 nav.html 实现导航栏。其他 html 类似于 index.html。知道出了什么问题吗?
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
我用于添加活动类的代码是纯 JS。这是 index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/9a39db93cf.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
let count = 0;
function counter()
{
count++;
document.querySelector('#pageContent').innerHTML = count;
}
</script>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<script type="text/javascript">
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for( let i=0; i<menuLength; i++){
if(menuItem[i].href === currentLocation){
menuItem[i].className = "active";
}
}
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<div id="nav-placeholder" class="sticky-top">
</div>
<div class="firstPage">
<h4>The title of this paragraph</h4>
<img onclick="counter(); return false;" src="images/mirciun.jpg" alt="mirciun" height=auto max-width=auto class="center">
<p id='pageContent'>0</p>
</div>
</body>
</html>
CSS:
body{ display: block; margin: 0; } .menu li{ display: inline-block; margin: 0; } ul.topnav{ background-color: #333; margin: 0; padding: 0; text-align:center; overflow: hidden; } ul.topnav li a{ display: block; font-size: 20px; padding: 10px; color: whitesmoke; text-decoration: none; } ul.topnav li a:hover:not(.active) {background-color: #222;} ul.topnav li a.active {background-color: #4CAF50;} @media screen and (max-width: "600px") { ul.topnav li {float: none;} } #brand{ display: table-cell; vertical-align: middle; line-height:50px; } #topText{ max-width: 500px; margin: auto; text-align: center; border: 5px solid green; color: red; background-color: #0f0f0f; margin-top: 10px; } .firstPage { margin-top: -20px; background-color:grey; max-width: 100%; height: auto; } h4{ padding: 20px; text-align: center; } .center { display: block; margin-left: auto; margin-right: auto; width: 50%; } #pageContent{ text-align:center; width: 75%; margin: auto; color: blue; }
解决方案
在准备好的函数上用 jquery 包装你的代码并移动到页面的底部。
$(function () {
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for (let i = 0; i < menuLength; i++) {
if (menuItem[i].href === currentLocation) {
menuItem[i].className = "active";
}
}
})
推荐阅读
- flutter - 错误:没有为类“BuildContext”定义方法“ancestorStateOfType”
- angular - Angular 中的 HTTP POST 请求
- google-cloud-platform - GCP 中的“域限制共享”是否会阻止服务帐户获得 IAM 权限?
- docker - 在 ubuntu 20.04 上运行 docker scan返回错误
- angular - 使用 *ngFor 时打印相同的值
- swift - 如何计算字符串中小写和大写字母的数量?
- android - Firestore 获取或添加特定数据
- c# - DXF 绘图中“点”相等的双值比较/公差
- node.js - npm 错误!405 方法不允许:离子 cli
- javascript - 三个js画布模糊