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