The button's background color will vanish if you click anywhere outside the button or on the body of

Question

The button's background color will vanish if you click anywhere outside the button or on the body of

Struggling with a tabpane created using HTML, CSS, and JavaScript. The problem arises when the background color of the active tab's button disappears upon clicking outside the button or on the body. While switching between tabs, I can change the colors of the buttons using the onfocus() and onblur() functions, but the issue persists. Is there a solution to this problem?

// console.log('hii');

function fun1(a){
    // console.log(a);
 var x = document.getElementById(a)  
 var data = document.getElementsByClassName('inner_section')
 console.log(data);
 for(var i=0;i < data.length;i++){
    data[i].style.display="none"
}
    x.className +=" slide-in-bottom"
    x.style.display = "block";

}

function fun2(b){
  b.style.backgroundColor="#ff6136"
  var d = document.getElementById('button_1')
  d.classList.remove('active_button')
}

function fun3(c){
    c.style.backgroundColor="white"
}

javascript html css

Answer 1

Answer №1

"Focus" within the browser serves as a tool primarily utilized for input boxes, allowing websites to track where text is being typed or aiding those with visual impairments in using tab navigation. This feature should not be misused to trigger events that alter the site's state, as doing so can result in unexpected behavior. It is advised against employing this method for a menu selector setup.

Instead of relying on focus to determine the selected menu item, consider utilizing existing functions to apply a "selected" class to the chosen button while removing it from all other buttons. To access all buttons, assign them a shared class in the HTML markup and retrieve the list using JavaScript:

document.getElementsByClassName("menu-buttons");

This will return an array of elements. Remove the "selected" class from an element like this:

el.classList.remove("selected");

Then, add the selected class to the clicked element:

el.classList.add("selected");

It is recommended to avoid using the onclick HTML attribute and instead utilize JavaScript to set event listeners, granting access to the Event object which simplifies identifying the clicked button. Here's an example implementation:

function selectMenuHandler(event) {
  for (var el of document.selectElementsByClassName("menu-selected")) {
    el.classList.remove("menu-selected")
  }
  event.target.classList.add("menu-selected")
}

for (var el of document.selectElementsByClassName("menu-button")) {
  el.addEventListener("click", selectMenuHandler);
}

Answer 2

"Focus" within the browser serves as a tool primarily utilized for input boxes, allowing websites to track where text is being typed or aiding those with visual impairments in using tab navigation. This feature should not be misused to trigger events that alter the site's state, as doing so can result in unexpected behavior. It is advised against employing this method for a menu selector setup.

Instead of relying on focus to determine the selected menu item, consider utilizing existing functions to apply a "selected" class to the chosen button while removing it from all other buttons. To access all buttons, assign them a shared class in the HTML markup and retrieve the list using JavaScript:

document.getElementsByClassName("menu-buttons");

This will return an array of elements. Remove the "selected" class from an element like this:

el.classList.remove("selected");

Then, add the selected class to the clicked element:

el.classList.add("selected");

It is recommended to avoid using the onclick HTML attribute and instead utilize JavaScript to set event listeners, granting access to the Event object which simplifies identifying the clicked button. Here's an example implementation:

function selectMenuHandler(event) {
  for (var el of document.selectElementsByClassName("menu-selected")) {
    el.classList.remove("menu-selected")
  }
  event.target.classList.add("menu-selected")
}

for (var el of document.selectElementsByClassName("menu-button")) {
  el.addEventListener("click", selectMenuHandler);
}

The button's background color will vanish if you click anywhere outside the button or on the body of

Answer №1

Similar questions

Displaying JSON data in an HTML table cell format

Let's compare the usage of JavaScript's toUTCString() method with the concept of UTC date

Navigate to the middle of the visible area

Expand the grid with extra rows once it has been generated, especially when dealing with a large volume of database records, utilizing JQGrid or JSGrid

What is the formula to determine if x is greater than y and also less than z?

Responsive design with Flexbox, interactive graphics using canvas, and dynamic content resizing

Using SVG files as properties in React from a data.js file

Utilizing AngularJS: Executing directives manually

Forwarding to another page following an AJAX post request to a Django view

Learning the ins and outs of HTML5 and CSS3

I am puzzled as to why my jQuery height and width functions are returning NaN as the result

Creating a Cancel Button in JSP/HTML/JS/CSS Form: A Step-by-Step Guide

Vue.js: Select a different div within the Vue object instead of the one that is bound

Experiencing an unexpected wait before the requestAnimationFrame?

Is there a way to remove deleted SASS styles from the generated CSS?

When using getStaticPaths, an error is thrown stating "TypeError: segment.replace is not a function."

The isAuthenticated status of the consumer remains unchanged even after being modified by a function within the AuthContext

Using jQuery to retrieve the content of a textarea and display it

Jquery function for determining height across multiple browsers

Problem with z-index in VueJS: Child div z-index not functioning within v-dialog