我是这里的初学者，我遇到了我认为是一个我不知道如何解决的简单问题。基本上我正在制作一个响应式网站，我现在的问题是我无法让我的导航栏在网站的其他部分正确响应，除了我的 index.html(工作正常)。
我使用了 w3schools 的代码来创建我的导航栏。
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
正如我所说，它适用于我的索引文件。但是当我在我的“新闻页面”上时，它不能正常工作。它重新定位，但在左侧的导航栏上显示主页。我如何让它在新闻页面上显示新闻，从新闻而不是主页开始？ (以及联系方式，关于以及)非常感谢!抱歉，如果这是一个愚蠢的问题。这是我第一次尝试制作响应式网站!
这里还有代码(来自 w3 学校的链接):
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
最佳答案
您似乎没有导航到另一个页面的原因:
当您单击“新闻”链接时，由于 #news，它不会将您带到新页面在这个 anchor 标记中 <a href="#news">News</a> .标签 #在 href 内指定窗口将滚动到的 HTML 元素 ID。在你的例子中，它只是滚动到你的网页的顶部，因为没有任何带有 id="news" 的 HTML 元素。大约。所以，在整个过程中，您实际上只在唯一一个页面上 - “主页”页面。
如何在“新闻”页面上突出显示“新闻”:
复制
index.html您已创建并将其重命名为news.html.确保这 2 个文件位于同一文件夹中。我们将使每个.html文件代表您网站上的一个页面，因为每个页面都包含独特的内容，因此需要不同的 HTML 代码。在您的代码块中为每个文件替换这两行
index.html和news.html:
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
用这个在 index.html :
<a href="index.html" class="active">Home</a>
<a href="news.html">News</a>
在 news.html 中有了这个:
<a href="index.html">Home</a>
<a href="news.html" class="active">News</a>
在这里，注意 class="active"当您在“主页”页面时，现在位于“主页”链接上，即 index.html和 class="active"当您在“新闻”页面时，它位于“新闻”链接上，即 news.html .这就是使链接以绿色突出显示的原因(根据您指定的 CSS 类 .active)。
- 打开
index.html在您的浏览器中尝试点击“新闻”链接。您应该导航到“新闻”页面，导航栏现在应该以绿色突出显示，如下所示:
当您将屏幕调整为较小的尺寸并单击汉堡包菜单按钮时，“新闻”页面上的它应该如下所示，正确的链接以绿色突出显示:
- 对所有其他页面重复。
提示:
在每个 HTML 页面中复制和粘贴 CSS 样式非常繁琐，并且包含太多重复代码。为了解决这个问题，我建议您将所有 CSS 样式放在一个 .css 中。文件并将该文件链接到您的每个 HTML 文件。按照 w3schools 的“外部 CSS”部分中的说明进行操作 here这样做。
关于javascript - 如何使不同页面的导航栏事件链接颜色变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48034535/