假设我有 20 个导航栏项，每个都链接到我网站上的不同页面。在每一页上，这 20 个元素保持不变。为了避免在所有 .html 文件中复制粘贴，其他解决方案建议使用 php 执行此操作。但是，例如，我如何使事件菜单项亮起白色？我不想将 header 复制粘贴到所有 .html 文件，因为如果我想再添加一个导航栏元素，我将不得不手动将其添加到所有 .html 文件。
必须有一个简单的解决方案，事件页面有一个事件元素。
========编辑========
Naomik，您的 javascript 解决方案看起来最有前途，尽管我目前无法让它工作(请参阅下面的第二次编辑)。
我的导航栏是在 nav.html 中定义的:
<nav id="nav" class="navbar navbar-inverse">
<div>
<ul id="navigation" class="nav navbar-nav navbar-left">
<li class="active"><a href="about.html" >About</a></li>
<li><a href="services.html" >Services</a></li>
<li><a href="pricing.html" >Pricing</a></li>
</ul>
</div>
</nav>这是三个 html 页面之一 (about.html)。我使用 JS 加载 nav.html 文件。结束 body 标签之前的 JS 片段是 naomik 提供的。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$.get("nav.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
</head>
<body>
<!-- *** NAVBAR *** -->
<div id="nav-placeholder"></div>
<!-- *** MAIN TEXT *** -->
<h1>ABOUT</h1>
<script>
function removeQueryString(url) {
return url.split('?')[0]
}
[].forEach.call(document.querySelectorAll('a'), function(elem) {
if (removeQueryString(elem.href) === removeQueryString(window.location.href))
elem.classList.add('is-active')
else
elem.classList.remove('is-active')
})
</script>
</body>
</html>============编辑==========
尽管 Naomik 的解决方案导致了 flashing website在每次加载页面时。因此，我采用了 Relisora 的解决方案。
谢谢
最佳答案
您首先要为 20 个页面中的每一个页面命名(或编号)。
在每个页面上，写上页面名称
<?php $page_name = "index" ?>
然后导入导航栏
<?php include 'navbar.php'; ?>
现在在你的 navbar.php 中你想检查你是什么 $page_name
<?php if ($page_name == 'index') {echo ' id="active"';} ?>
然后你对你拥有的每个页面都这样做。
现在您只需要在 CSS 中使用 #active {} 来确定样式，您的当前页面将以事件样式显示。
编辑:
现在我们可以编写 id="active"，我们希望它位于 li 中，以便我们可以使用该类:
<li<?php if ($page_name == 'index') {echo ' id="active"';} ?>>Home page</li>
不要忘记添加链接:
<li<?php if ($page_name == 'index') {echo ' id="active"';} ?>><a href="#" >Home page</a></li>
关于javascript - 在 20 个页面的网站的所有页面中包含一个通用的 html 标题(具有事件类)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38217950/