Question

我是初学者，我认为这是一个我不知道如何解决的简单问题。基本上我正在建立一个响应式网站，我现在的问题是除了我的index.html之外我无法使我的导航栏正确响应网站的其他部分（工作正常）。

我使用了w3schools的代码来创建我的导航栏。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

正如我所说，它适用于我的索引文件。但是，当我在我的“新闻页面”时，它无法正常工作。它重新启动，但它在左边的导航栏上显示Home。我该怎么做才能在新闻页面上说新闻，从新闻而不是主页开始？（还有联系方式，关于我们）非常感谢！对不起，如果这是一个愚蠢的问题。这是我第一次尝试建立一个快速响应的网站！

以下是代码（来自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()">&#9776;</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>

Answer 1

您似乎没有导航到另一个页面的原因

当您点击链接＆＃34;新闻＆＃34;时，由于此锚标记#news中的<a href="#news">News</a>，它不会将您带到新页面。 #中的主题标签href指定窗口将滚动到的HTML元素ID。在您的情况下，它只是滚动到您网页的顶部，因为没有id="news"左右的任何HTML元素。所以，这一直，你实际上只是在一个唯一的页面 - ＆＃34; Home＆＃34;页。

如何制作＆＃34;新闻＆＃34;当你进入＆＃34;新闻＆＃34;页：

重复您已创建的index.html，并将其重命名为news.html。确保这两个文件位于同一文件夹中。我们将使每个.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"现已放置在＆＃34; Home＆＃34;当您进入＆＃34; Home＆＃34;页面，即index.html和class="active"被放置在＆＃34;新闻＆＃34;当您关注＆＃34;新闻＆＃34;页面，即news.html。这就是链接的绿色突出显示（根据您指定的CSS类.active）。

在您的浏览器中打开 index.html并尝试点击＆＃34;新闻＆＃34;链接。您应该导航到您的＆＃34;新闻＆＃34;现在，页面和导航栏应以绿色突出显示，如下所示：

当您将屏幕调整为较小尺寸，然后点击汉堡菜单按钮时，它应该在＆＃34;新闻＆＃34;以绿色突出显示正确链接的页面：

对所有其他页面重复。

提示复制＆amp;在每个HTML页面中粘贴CSS样式都很繁琐，并且包含太多重复的代码。为了清理这一点，我建议您将所有CSS样式放在一个.css文件中，并将该文件链接到每个HTML文件。按照＆＃34;外部CSS＆＃34;中的说明进行操作。来自w3schools here的部分。

如何在不同页面上使导航栏活动链接颜色更改

1 个答案: