To ensure the clicked button remains active, I utilize Bootstrap for seamless implementation

Question

To ensure the clicked button remains active, I utilize Bootstrap for seamless implementation

I have exhausted all possible methods to override the issue, including tweaking the CSS, but nothing seems to be working. I am currently utilizing bootstrap 5 for this project.

document.addEventListener("DOMContentLoaded", function() {
  const notesButton = document.getElementById('notes');
  const tasksButton = document.getElementById('tasks');

  notesButton.addEventListener('click', function() {
    notesButton.classList.add('active');
    tasksButton.classList.remove('active');
  });

  tasksButton.addEventListener('click', function() {
    tasksButton.classList.add('active');
    notesButton.classList.remove('active');
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f2e9f4e9f4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73111c1c07000701120333465d405d40">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous></script>
  <link rel="stylesheet" href="styles/main.css" />
  <title>Trackz</title>
</head>
<header>
  <div class="container-fluid mt-3">
    <nav class="navbar tabar mx-5">
      <div class="container-fluid">
        <a class="navbar-brand mx-4 text_color" href="/">
                Trackz
            </a>
        <div class="d-flex">
          <a href="/"><button class="btn btn-outline-light mx-2" id="notes">Notes</button></a>
          <a href="/Tasks"><button class="btn btn-outline-light mx-2" id="tasks">Tasks</button></a>
        </div>
      </div>
    </nav>
  </div>
</header>

html css bootstrap-5

Answer 1

Answer №1

When your buttons are enclosed in anchor tags pointing to different pages (href="/" and href="/Tasks"), clicking on them will lead the browser to navigate away, resulting in the active state not being visually preserved on the buttons.

While you could use preventDefault(), it might be more logical to avoid using the anchor tags altogether.

It is advisable to carefully consider the desired behavior and adjust your HTML structure accordingly.

Nevertheless, here is a code snippet that incorporates the functionality you desire utilizing preventDefault():

    document.addEventListener("DOMContentLoaded", function() {
  const notesButton = document.getElementById('notes');
  const tasksButton = document.getElementById('tasks');

  notesButton.addEventListener('click', function(event) {
    event.preventDefault();  // Prevent the page navigation
    notesButton.classList.add('active');
    tasksButton.classList.remove('active');
  });

  tasksButton.addEventListener('click', function(event) {
    event.preventDefault();  // Prevent the page navigation
    tasksButton.classList.add('active');
    notesButton.classList.remove('active');
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2e35283528">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26444949525552544756661308150815">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles/main.css" />
  <title>Trackz</title>
</head>
<header>
  <div class="container-fluid mt-3">
    <nav class="navbar tabar mx-5">
      <div class="container-fluid">
        <a class="navbar-brand mx-4 text_color" href="/">
                Trackz
            </a>
        <div class="d-flex">
          <a href="/"><button class="btn btn-outline-light mx-2" id="notes">Notes</button></a>
          <a href="/Tasks"><button class="btn btn-outline-light mx-2" id="tasks">Tasks</button></a>
        </div>
      </div>
    </nav>
  </div>
</header>

Answer 2

When your buttons are enclosed in anchor tags pointing to different pages (href="/" and href="/Tasks"), clicking on them will lead the browser to navigate away, resulting in the active state not being visually preserved on the buttons.

While you could use preventDefault(), it might be more logical to avoid using the anchor tags altogether.

It is advisable to carefully consider the desired behavior and adjust your HTML structure accordingly.

Nevertheless, here is a code snippet that incorporates the functionality you desire utilizing preventDefault():

    document.addEventListener("DOMContentLoaded", function() {
  const notesButton = document.getElementById('notes');
  const tasksButton = document.getElementById('tasks');

  notesButton.addEventListener('click', function(event) {
    event.preventDefault();  // Prevent the page navigation
    notesButton.classList.add('active');
    tasksButton.classList.remove('active');
  });

  tasksButton.addEventListener('click', function(event) {
    event.preventDefault();  // Prevent the page navigation
    tasksButton.classList.add('active');
    notesButton.classList.remove('active');
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2e35283528">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26444949525552544756661308150815">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles/main.css" />
  <title>Trackz</title>
</head>
<header>
  <div class="container-fluid mt-3">
    <nav class="navbar tabar mx-5">
      <div class="container-fluid">
        <a class="navbar-brand mx-4 text_color" href="/">
                Trackz
            </a>
        <div class="d-flex">
          <a href="/"><button class="btn btn-outline-light mx-2" id="notes">Notes</button></a>
          <a href="/Tasks"><button class="btn btn-outline-light mx-2" id="tasks">Tasks</button></a>
        </div>
      </div>
    </nav>
  </div>
</header>

Answer 3

Answer №2

You have been utilizing anchor tags to navigate to different pages. Therefore, it is essential to incorporate the preventDefault() method in the event listener. Refer to the example provided below:

document.addEventListener("DOMContentLoaded", function() {
  const notesButton = document.getElementById('notes');
  const tasksButton = document.getElementById('tasks');

  notesButton.addEventListener('click', function(e) {
    e.preventDefault();
    notesButton.classList.add('active');
    tasksButton.classList.remove('active');
  });

  tasksButton.addEventListener('click', function(e) {
    e.preventDefault();
    tasksButton.classList.add('active');
    notesButton.classList.remove('active');
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb8a3bea3be">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d302d30">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles/main.css" />
  <title>Trackz</title>
</head>
<header>
  <div class="container-fluid mt-3">
    <nav class="navbar tabar mx-5">
      <div class="container-fluid">
        <a class="navbar-brand mx-4 text_color" href="/">
                Trackz
            </a>
        <div class="d-flex">
          <a href="/"><button class="btn btn-outline-light mx-2" id="notes">Notes</button></a>
          <a href="/Tasks"><button class="btn btn-outline-light mx-2" id="tasks">Tasks</button></a>
        </div>
      </div>
    </nav>
  </div>
</header>

Answer 4

You have been utilizing anchor tags to navigate to different pages. Therefore, it is essential to incorporate the preventDefault() method in the event listener. Refer to the example provided below:

document.addEventListener("DOMContentLoaded", function() {
  const notesButton = document.getElementById('notes');
  const tasksButton = document.getElementById('tasks');

  notesButton.addEventListener('click', function(e) {
    e.preventDefault();
    notesButton.classList.add('active');
    tasksButton.classList.remove('active');
  });

  tasksButton.addEventListener('click', function(e) {
    e.preventDefault();
    tasksButton.classList.add('active');
    notesButton.classList.remove('active');
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb8a3bea3be">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d302d30">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles/main.css" />
  <title>Trackz</title>
</head>
<header>
  <div class="container-fluid mt-3">
    <nav class="navbar tabar mx-5">
      <div class="container-fluid">
        <a class="navbar-brand mx-4 text_color" href="/">
                Trackz
            </a>
        <div class="d-flex">
          <a href="/"><button class="btn btn-outline-light mx-2" id="notes">Notes</button></a>
          <a href="/Tasks"><button class="btn btn-outline-light mx-2" id="tasks">Tasks</button></a>
        </div>
      </div>
    </nav>
  </div>
</header>

To ensure the clicked button remains active, I utilize Bootstrap for seamless implementation

Answer №1

Answer №2

Similar questions

Changing the background of a Muitextfield input element conceals the label

Creating a currency input field in HTML using a pattern textbox

Adding Text Above a Material Icon in Angular: A Guide

When you click on links and buttons, a focus outline appears

What is the best way to align this list horizontally with evenly distributed widths?

Subclass Pseudoclass in JavaFX is a powerful feature that

Display validation messages when the user either clicks out of the textbox or finishes typing

What are the ways in which RFC 2854 renders RFC 1867 outdated and irrelevant?

Tips for resolving Layout Shift issues in responsive images utilizing the picture & source HTML tags

how can you make keyframe animation pause at the last stage?

Populate the table with JSON object information

jQuery causing trouble with AJAX in Rails

What is the correct way to format the headings for sub-level pages, like chapters within a novel or sections within a lengthy article?

Position the menu links in different alignments - some to the right and others to the

How can I prevent or override the text being pushed to the right by CSS::before?

What is the best way to resize a div to fit its content if 'clear:both' and 'float:left' are not working as desired?

Selectize-dropdown menu shines brightly as it opens upwards

Flexbox wrap allows you to determine which child element will move to the next line

Passing parameters from an HTML form using PHP

How to automatically set the radio button as "checked" with Javascript upon loading the page