响应式和菜单栏下方的导航栏标题不正确答案

【问题标题】：Nav Bar Incorrect Title when responsive and underneath menu bar响应式和菜单栏下方的导航栏标题不正确
【发布时间】：2019-06-21 03:47:12
【问题描述】：

所以我创建了我的响应式导航栏，当它在移动设备中时，它并不是我想象的那样。我得到了活动页面的“标题”，我想要它做的是如果我点击下一页，左上角的标题会改变。这是我得到这个想法的地方。 https://www.w3schools.com/howto/howto_js_topnav_responsive.asp.

这就是我的页面现在的样子。

当我转到另一个页面时，“活动”标题页不再是绿色的。并且标题仍然命名为home。这是 w3schools 在您切换到另一个 (dot)html 页面时没有告诉您的另一个问题。

此外，我希望主页选项卡位于汉堡图标栏下方，使其外观干净。比如这个。

这是我的代码，看看你能做些什么来解决我的问题。

index.html

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

.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 a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}

.summary {
  min-height: 75vh;
  max-width: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profilePicture {
  padding: 2rem;
}

.profileSummary {
  max-width: 400px;
}

@media screen and (max-width: 800px) {
  .summary {
    flex-direction: column;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="script.js"></script>
</head>

<body>

  <div class="topnav" id="myTopnav">
    <a href="index.html" class="active">Home</a>
    <a href="about.html">About Me</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="contact.html">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

  <div class="summary">
    <div class="profilePicture">
      <img src="https://ih1.redbubble.net/image.464384650.8618/flat,550x550,075,f.jpg" style="width: 170px; height: 170px; border-radius:50%;">
    </div>
    <div class="profileSummary">
      Attentive alas because yikes due shameful ouch much kookaburra cantankerously up unbridled far vulnerably climbed aristocratically hired brusque fox said the therefore terrier scallop innocent on goodness mongoose woolly showed insistently and.
    </div>
  </div>

</body>

</html>

about.html

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

.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 a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}

.summary {
  min-height: 75vh;
  max-width: 2000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profilePicture {
  padding: 2rem;
}

.profileSummary {
  max-width: 400px;
}

@media screen and (max-width: 800px) {
  .summary {
    flex-direction: column;
  }
}


/* Nav Styling Ends Here */

.skillResponsive {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

.container {
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding: 10px;
  color: white;
}

.html {
  width: 60%;
  background-color: #00e64d;
}

.css {
  width: 60%;
  background-color: #4da6ff;
}

.sql {
  width: 10%;
  background-color: #cc66ff;
}

.pc {
  width: 75%;
  background-color: #ff5050;
}

.trouble {
  width: 75%;
  background-color: #ff8533;
  margin-bottom: 45px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="script.js"></script>
</head>

<body>

  <!-- The navigation menu -->

  <div class="topnav" id="myTopnav">
    <a href="index.html">Home</a>
    <a href="about.html" class="active">About Me</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="contact.html">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>


  <h1 style="text-align: center;">
    About me
  </h1>

  <div class="desc">
    <p style="background-color: lightblue; border: 2px solid lightgreen; border-radius: 10px; text-align: center; font-size: 22px;">
      I am currently attending Pikes Peak Community College towards my Associate of Applied Science Degree in Computer Information Systems.
    </p>
  </div>

  <h2 align="center">My Programming Skills</h2>

  <div class="skillResponsive">
    <!--Div for Skill Bar-->

    <p>HTML</p>
    <div class="container">
      <div class="skills html">60%</div>
    </div>

    <p>CSS</p>
    <div class="container">
      <div class="skills css">60%</div>
    </div>

    <p>SQL (Currently taking "Intro to SQL" at college this semester for a Database certificate)</p>
    <div class="container">
      <div class="skills sql">10%</div>
    </div>

    <h2 align="center">Computer Skills</h2>

    <p>Build Computer</p>
    <div class="container">
      <div class="skills pc">75%</div>
    </div>
    <p>
      The other 25% would have to be cable management, watercooling, and trying to figure which hardware is recommended to be place first to make cable management a priority to give it a good airflow. See the Portfolio page for a picture of my first gaming
      PC.
    </p>

    <p>Software Troubleshooting</p>
    <div class="container">
      <div class="skills trouble">90%</div>
    </div>

  </div>

  <h2 style="text-align: center; background-color: lightblue; border: 2px solid lightgreen; border-radius: 10px; margin-left: 100px; margin-right: 100px;">
    My College Degree Progress
  </h2>

</body>

</html>

我可以发布更多 (dot)html 文件，但我想你明白了。

【问题讨论】：

标签： html css drop-down-menu responsive-design flexbox

【解决方案1】：

在“移动”模式下，我认为这不应该是一个显示“家”的标题。我认为它应该是一个用户可以单击以将其带到主页的按钮。

至于您的第一个问题，我相信您是在问如何在导航栏中突出显示“活动标签”。换句话说，如果您在“关于”页面上，您希望突出显示“关于”，而不是“主页”。

一种方法是：

首先，在每个页面的<body> 标签上，添加id。例如，在index.html 上，您可以拥有<body id="home">。对于about.html，您可以使用<body id="about">。为您的每个页面执行此操作。确保 id 值是唯一的。

第二，在每个导航栏链接上，也给它们一个id。例如，您的导航栏标记可能会更改为如下所示：

<div class="topnav" id="myTopnav">
    <a href="index.html" id="nav_home" class="active">Home</a>
    <a href="about.html" id="nav_about">About Me</a>
    <a href="portfolio.html" id="nav_portfolio">Portfolio</a>
    <a href="contact.html" id="nav_contact">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>

同样，这需要在您的每个页面上完成。

第三，将所有这些元素的样式规则添加到您的主 CSS 文件中。这只需要完成一次，因为您的其他页面引用了相同的 CSS 文件。规则集可能如下所示：

#home #nav_home,
#about #nav_about,
#portfolio #nav_portfolio,
#contact #nav_contact {
    background-color: #4CAF50;
    color: white;
}

最后，从主 CSS 文件中删除 .active 的规则集；或从index.html 文件的链接中删除class="active"。如果您不这样做，那么“主页”页面将始终突出显示为活动状态，即使它不是。

这里有两个小提琴来证明这一点。您会注意到 CSS 和 JS 在两者中是相同的。唯一的区别是 HTML，因为它们代表两个不同的页面。

您的主页：https://jsfiddle.net/7ynbfax4/1/

您的关于页面：https://jsfiddle.net/7ynbfax4/2/

对于您的第二个问题，我建议在此处创建另一个帖子。通常，我们会尝试将一个问题保留在帖子中，以便人们将来更容易找到答案。但要让您走上正轨，您需要更改媒体查询中的 CSS 以适应移动屏幕的宽度。

【讨论】：