时间戳

首页 > 解决方案 > 加载正确的页面后，如何更改导航栏上链接的颜色？

javascript - 加载正确的页面后，如何更改导航栏上链接的颜色？

问题描述

问题真的很严重，我需要帮助。请帮助我，因为我被困住了，我尝试了多种方法。所以请帮助我，我真的需要帮助。这是我在课堂上制作的一个网站。我尝试了很多东西，但都没有奏效！我更愿意在 JQuery 中执行此操作，但我认为我不能。我可以这样做吗？

li {
  float: left;
}

.current-link {
  background-color: #4caf50;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: rgb(77, 77, 77);
}

ul {
  position: sticky;
  top: 0;
}
#homeGreeting {
  text-align: center;
  color: #000100;
}

body {
  background-color: rgba(131, 122, 122, 0.479);
}
h1 {
  font-family: "Times New Roman", Times, serif;
}

#WelcomeIMG {
width: 60%;
height: auto;
text-align: center;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#TOPNAV {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

#BOTTOMNAV {
  background-color: #000000;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.COPYRIGHT p {
  color: white;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Mamoth's Site - Home Page</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <ul id="TOPNAV" class="topnav">
      <li><a href="index.html">Home</a></li>
      <li><a href="Review.html">Review</a></li>
      <li><a href="Contact.html">Contact</a></li>
      <li style="float:right"><a href="About.html">About</a></li>
    </ul>
    <h1 id="homeGreeting">WELCOME TO MAMOTH'S WEBSITE!</h1>
    <br/>
    <image id="WelcomeIMG" src="Welcome.jpg" class="center"></image>
    <ul id="BOTTOMNAV" class="COPYRIGHT"><p>&copy;Brayden Kennedy-Wilcox 2019</p></ul>
  </body>
</html>







<!DOCTYPE html>
<html>
  <head>
    <title>Mamoth's Site - Home Page</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <ul id="TOPNAV" class="topnav">
      <li><a href="index.html">Home</a></li>
      <li><a href="Review.html">Review</a></li>
      <li><a href="Contact.html">Contact</a></li>
      <li style="float:right"><a href="About.html">About</a></li>
    </ul>
  </body>
</html>



<!DOCTYPE html>
<html>
  <head>
    <title>Mamoth's Site - Home Page</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <ul id="TOPNAV" class="topnav">
      <li><a href="index.html">Home</a></li>
      <li><a href="Review.html">Review</a></li>
      <li><a href="Contact.html">Contact</a></li>
      <li style="float:right"><a href="About.html">About</a></li>
    </ul>
  </body>
</html>



<!DOCTYPE html>
<html>
  <head>
    <title>Mamoth's Site - Home Page</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <ul id="TOPNAV" class="topnav">
      <li><a href="index.html">Home</a></li>
      <li><a href="Review.html">Review</a></li>
      <li><a href="Contact.html">Contact</a></li>
      <li style="float:right"><a href="About.html">About</a></li>
    </ul>
  </body>
</html>

`

标签： javascripthtmlcss

解决方案

由于您的每个导航项都链接到一个新页面，因此您可以轻松地创建一个新的 CSS 类。

你给它颜色并将类设置为链接元素：

.active {
  color: #f00;
  font-weight: bold; /*Wahtever you want to do... */
}
<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <title>Mamoth's Site - Home Page</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <ul id="TOPNAV" class="topnav">
      <li><a href="index.html" class="active">Home</a></li>
      <li><a href="Review.html">Review</a></li>
      <li><a href="Contact.html">Contact</a></li>
      <li style="float:right"><a href="About.html">About</a></li>
    </ul>
  </body>
</html>


<!-- Review.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Mamoth's Site - Home Page</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <ul id="TOPNAV" class="topnav">
      <li><a href="index.html">Home</a></li>
      <li><a href="Review.html" class="active">Review</a></li>
      <li><a href="Contact.html">Contact</a></li>
      <li style="float:right"><a href="About.html">About</a></li>
    </ul>
  </body>
</html>

推荐阅读