Active font-weight with JS + CSS

Question

I need to know how to activate font-weight on the page (I'm using JavaScript).

Example: If I'm on the teachers page, the <a> Teachers </a> font-weight should be bold like shown in image below.

<!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

You are on teachers page and 'active' class is already there so no need to use javascript for it. Simply adding font weight to the 'active' class is enough.

<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")
    }
}

Active font-weight with JS + CSS

Question

2 answers

solution1
1 2020-05-30 10:23:41

solution2
0 2020-05-31 03:37:02

Active font-weight with JS + CSS

Question

2 answers

solution1 1 2020-05-30 10:23:41

solution2 0 2020-05-31 03:37:02

solution1
1 2020-05-30 10:23:41

solution2
0 2020-05-31 03:37:02