JS + CSS 的活动字体粗细

Question

我需要知道如何在页面上激活字体粗细（我正在使用 JavaScript）。

示例：如果我在教师页面上， <a> Teachers </a>字体粗体应该如下图所示为粗体。

<!DOCTYPE html>
<html>
   <head>

       {% block head %}
           <title>Private Classes</title>
       {% endblock %}

       <link rel="stylesheet" href="/styles.css">
   </head>

   <body>
       <header>       
           <div class="links">
               <a href="/" class="active">Teachers</a>
               <a href="/students">Students</a>
           </div>
       </header>       
       {% block content %}
       {% endblock %}

   </body>
</html>

Answer 1

您在教师页面上，并且“活动” class 已经存在，因此无需为此使用 javascript。 只需将字体粗细添加到“活动” class 就足够了。

<style>
.active{
  font-weight: bold;
}
</style>

Answer 2

const currentPage = location.pathname
const menuItems = document.querySelectorAll("header .links a")

for (item of menuItems) {
    if (currentPage.includes(item.getAttribute("href"))) {
        item.classList.add("active")
    }
}

JS + CSS 的活动字体粗细

问题描述

2 个解决方案

解决方案1
1 2020-05-30 10:23:41

解决方案2
0 2020-05-31 03:37:02

JS + CSS 的活动字体粗细

问题描述

2 个解决方案

解决方案1 1 2020-05-30 10:23:41

解决方案2 0 2020-05-31 03:37:02

解决方案1
1 2020-05-30 10:23:41

解决方案2
0 2020-05-31 03:37:02