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>

Codesigner · Answer 1 · 2020-05-30T13:44:02.567

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>

edited May 30 '20 at 13:44

answered May 30 '20 at 10:23

Codesigner

578
3
16

Yes, but I would like to do this per JS – Pedro Salim May 30 '20 at 17:10
any specific reason? – Codesigner May 31 '20 at 04:23

score 0 · Answer 2 · answered May 31 '20 at 03:37

0

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

answered May 31 '20 at 03:37

Pedro Salim

1

How it is going to add font-weight bold if active class doesn't conines rule of fotweight weight set to bold? – Codesigner May 31 '20 at 04:27
I used CSS as you said in the answer. But now JS activates the class, making the code more dynamic – Pedro Salim Jun 01 '20 at 02:29

Active font-weight with JS + CSS

2 Answers2