Enhance text style using JS & CSS

I am struggling to understand how I can implement font-weight changes on my webpage using JavaScript.

For instance, when a user is on the teachers page, the <a> Teachers </a> text should have a bold font weight as illustrated in the image below.

https://i.sstatic.net/ZutBo.png

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

This is the teachers page where the 'active' class is already present, eliminating the need for JavaScript. To enhance the style of the 'active' class, you can simply apply font weight to it.

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

Answer №2

let pathName = location.pathname
let linksList = document.querySelectorAll("header .menu a")

for (link of linksList) {
    if (pathName.includes(link.getAttribute("href"))) {
        link.classList.add("current")
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The technique of accessing parent props from a child composition component in React

I am trying to reduce every letter prop from the child component, Palata. How can I achieve this? index.js <Block letter="I" mb={16}> <Palata letter="I" start={4} end={9}/> <Wall/> <Empty/> <Palata le ...

JavaScript: Modifying an Array of Matrices

Could anyone assist me with updating a matrix array? I have an initial matrix with preset values and need to update specific coordinates within it. Here is the base matrix: var myMatrix = [ ['-','-','-','-',&ap ...

Add a symbol at the end of the input that signifies its value

I have a form field that expects a percentage as input, but I want to visually indicate to the user that they should enter a percent value. The challenge I face is that I want the percentage symbol to appear before the number in the input box, like this: ...

Troubleshoot and resolve the issue of a page scroll freeze bug occurring while scrolling through an overflowed

My webpage features a Hero section with 2 columns - the left column contains a gallery slider, and the right column consists of 2 text blocks. The challenge here is that the right column needs to be 100% of the screen height while scrolling. To achieve thi ...

Exploring the depths of Rx.ReplaySubject: Techniques for delaying the `next()` event

Confused Mind: Either I'm mistaken, or the whiskey is starting to take effect. (I can't rule out the possibility that I'm just going crazy. Apologies for that.) Assumption: My assumption was that ReplaySubject would emit a single value eve ...

Using ng serve to upload multipart files in Angular 2

I am currently working on the front end of a file uploading service and have encountered a strange issue. When I restart the server using ng serve, it throws an error related to generated components within the app component. The error message can be seen h ...

Check if a certain object is devoid of any values based on the elements in an array - JavaScript

I have collected data related to various businesses: { "business": { "type": [ "LLC", "Corporation" ], "LLC": { "status": "acti ...

Tips for effectively utilizing the minify maven plugin for compressing JS and CSS files within an AngularJS application

I have been attempting to compress javascripts and css files within my angularjs application by utilizing the samaxes minify maven plugin. While I can successfully minify all js & css files and create a war file with maven, upon trying to access the ap ...

Convert a JSON Object using AngularJs

Is there a method in Angular to restructure this JSON Object? I am looking to convert the JSON object from its original format: $scope.TestJson = { "filters": [ { "dataPropertyID": "VoidType", ...

Steps to prepend a domain to file_get_contents function in PHP script

Recently, I enlisted the help of a PHP coder to make modifications to two files for me. The purpose was to allow users to link directly to a file converted from DOC to IMG on . Below you can find the edited code (highlighted by 'DrTech76'): get ...

Varying spacing among elements with identical classes

I'm facing some styling issues. My goal is to ensure that each h3 tag has the same distance between the bottom border of its container (marked with a pink border) and the bottom border of its parent (indicated in the image below): https://i.sstatic.ne ...

AngularJS - Increase the input date by 6 hours before converting it to JSON

Is there a way to add 6 hours to an input date in AngularJS? I attempted the following code: var eventStart = new Date ($scope.event.startdateid); var startDate = new Date ( eventStart ); startDate.setHours ( eventStart.getHours() + 6 ); event.startdate ...

Utilizing jQuery's map function to extract data attributes from lists and store them in an array

View the working example Check out the failed example I'm currently utilizing a pie chart plugin available on GitHub. My objective is to generate an array resembling the structure below: [["Male",12,"some text","#222"], ["Fe ...

How can I use the jQuery map function to separate IDs with commas?

code: <script> $("#save_other").click(function(e){ e.preventDefault(); question = $(".question:checked").map(function() { return this.id; }).get().join(","); alert(question); ...

The issue with AngularJS ng-model not functioning properly with dynamically generated input fields

I have set up a dynamic templateUrl for form fields and I am attempting to use ng-model within ng-repeat. The parent directives and form field directive are functioning correctly and being generated, but when I try to apply ng-model it does not seem to wor ...

Dividing points in half at the top and bottom edges in a chart using chartjs

https://i.sstatic.net/AfosF.png Upon observation of the provided image, it can be seen that the points are halved when they reach the top or bottom edges, specifically when the data points are 1 or 5 in this context. Various attempts were made to address ...

Angular application causing issues with sticky top navigation bar

Currently, I am working on a web application that features a sticky navigation bar at the top. The unique aspect of this navigation bar is that it includes a brand logo positioned above it. Upon the initial loading of the page, users are greeted by the bra ...

Error in Syntax & Function is Undefined

issues controllers.js:6 Uncaught SyntaxError: Unexpected token ( ionic.bundle.js:26794 Error: [ng:areq] Argument 'MenuCtrl' is not a function, got undefined In the process of developing a cross-platform app using Ionic framework with WordPress ...

JS filter function is not functioning as expected. It's unclear what the issue might be

Check out my previous inquiry What could be the issue with my filter? I've implemented a filter, but it seems to have some glitches when dealing with specific values. The 'No Record Found' message doesn't appear as expected in certain ...

Is it possible to recognize when the mouse button is held down and the cursor is outside the viewport by using mouseleave detection?

Is there a way to detect when a user moves the mouse outside of the view-port, even if they are holding down the mouse button (for example, if the mouse is on the browser address bar)? In the code below, I am currently using mouseout and mouseleave to det ...