Is there a way for me to modify the color of the currently selected button?

Question

Is there a way for me to modify the color of the currently selected button?

I've been attempting to change the color of the active button when clicked, but my CSS class "activePage" isn't doing the trick. Ideally, clicking the "projects" button should turn it red, and clicking the "about" button should change it to red while reverting the "projects" button to its original color.

This is the JavaScript function that governs the button transitions:

function homeTransition()
    {   
        $(this).toggleClass('activePage');
        
        if(document.getElementById("aboutContent").className.indexOf("slideInLeft") !== -1){
        document.getElementById("aboutContent").className = " animated slideOutLeft";
        }
        ... // Remaining transition functions omitted for brevity
    }

//Menu
function expand(){
  $(this).toggleClass("on");
  $(".menu").toggleClass("active");
};
$(".button").on('click', expand);

javascript jquery html css button

Answer 1

Answer №1

Your click functions need to be within jQuery's scope.

I've removed irrelevant code, so please avoid copying and pasting blindly.

I've updated the HTML to remove onClick and instead bind the events inside jQuery's ready function. Additionally, I've adjusted the CSS targeting the anchor tag for the text style.

Take a look at the refactored snippet below:

//Menu

$(function() {
  function expand() {
    $(this).toggleClass("on");
    $(".menu").toggleClass("active");
  };

  $('.noselect').click(function() {
    $('.noselect').removeClass('activePage');
    $(this).toggleClass('activePage');
  });

  $(".button").on('click', expand);
});

// Revised CSS styles for the menu and content

body {
  font-family: "Source Sans Pro", sans-serif;
  color: #ccc;
  z-index: -100;
  background-color: black;
  overflow: hidden;
}

#aboutContent, #projectsContent, #contactContent {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: all 250ms;
  -webkit-transform: translateZ(0) translateX(-100%);
  transform: translateZ(0) translateX(-100%);
  background-color: black;
  z-index: -1;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(38, 139, 190, 0.84);
  width: 18%;
  box-sizing: border-box;
  transition: all 250ms;
  -webkit-transform: translateZ(0) translateX(-100%);
  transform: translateZ(0) translateX(-100%);
  text-align: center;
  box-shadow: 0 0 20px #000000;
}

.active {
  transform: translateZ(0) translateX(0);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  color: #e5e5e5;
}

.activePage {
  color: red;
}

// Rest of the CSS styles remain unchanged

<!DOCTYPE html>

// HTML and external resources remain unchanged for context display

Answer 2

Your click functions need to be within jQuery's scope.

I've removed irrelevant code, so please avoid copying and pasting blindly.

I've updated the HTML to remove onClick and instead bind the events inside jQuery's ready function. Additionally, I've adjusted the CSS targeting the anchor tag for the text style.

Take a look at the refactored snippet below:

//Menu

$(function() {
  function expand() {
    $(this).toggleClass("on");
    $(".menu").toggleClass("active");
  };

  $('.noselect').click(function() {
    $('.noselect').removeClass('activePage');
    $(this).toggleClass('activePage');
  });

  $(".button").on('click', expand);
});

// Revised CSS styles for the menu and content

body {
  font-family: "Source Sans Pro", sans-serif;
  color: #ccc;
  z-index: -100;
  background-color: black;
  overflow: hidden;
}

#aboutContent, #projectsContent, #contactContent {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: all 250ms;
  -webkit-transform: translateZ(0) translateX(-100%);
  transform: translateZ(0) translateX(-100%);
  background-color: black;
  z-index: -1;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(38, 139, 190, 0.84);
  width: 18%;
  box-sizing: border-box;
  transition: all 250ms;
  -webkit-transform: translateZ(0) translateX(-100%);
  transform: translateZ(0) translateX(-100%);
  text-align: center;
  box-shadow: 0 0 20px #000000;
}

.active {
  transform: translateZ(0) translateX(0);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  color: #e5e5e5;
}

.activePage {
  color: red;
}

// Rest of the CSS styles remain unchanged

<!DOCTYPE html>

// HTML and external resources remain unchanged for context display

Answer 3

Answer №2

One useful feature in CSS is the 'active' property which enables you to customize the color and appearance of your elements.

For example:

button:active{
    background:olive;
}

button:focus{
    background:olive;
}

I trust this information will be beneficial to you

Answer 4

One useful feature in CSS is the 'active' property which enables you to customize the color and appearance of your elements.

For example:

button:active{
    background:olive;
}

button:focus{
    background:olive;
}

I trust this information will be beneficial to you

Answer 5

Answer №3

The 'this' variable in the homeTransition function and all other functions makes reference to the window object.

To resolve this issue, you can follow these steps:

Modify the onclick function call in the HTML to:

<div id="home" onclick="homeTransition(event)"

Also, ensure to include the event argument in the JavaScript file:

function homeTransition(event) {   
    $(event.target).toggleClass('activePage');

Answer 6

The 'this' variable in the homeTransition function and all other functions makes reference to the window object.

To resolve this issue, you can follow these steps:

Modify the onclick function call in the HTML to:

<div id="home" onclick="homeTransition(event)"

Also, ensure to include the event argument in the JavaScript file:

function homeTransition(event) {   
    $(event.target).toggleClass('activePage');

Answer 7

Answer №4

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.button {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

.active-button, .button:hover {
  background-color: #666;
  color: white;
}
</style>
</head>
<body>
<div id="myDIV">
  <button class="button">1</button>
  <button class="button active-button">2</button>
  <button class="button">3</button>
  <button class="button">4</button>
  <button class="button">5</button>
</div>

<script>
// Apply active class to the current button (highlighted)
var header = document.getElementById("myDIV");
var buttons = header.getElementsByClassName("button");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active-button");
  current[0].className = current[0].className.replace(" active-button", "");
  this.className += " active-button";
  });
}
</script>

</body>
</html>

Answer 8

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.button {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

.active-button, .button:hover {
  background-color: #666;
  color: white;
}
</style>
</head>
<body>
<div id="myDIV">
  <button class="button">1</button>
  <button class="button active-button">2</button>
  <button class="button">3</button>
  <button class="button">4</button>
  <button class="button">5</button>
</div>

<script>
// Apply active class to the current button (highlighted)
var header = document.getElementById("myDIV");
var buttons = header.getElementsByClassName("button");
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active-button");
  current[0].className = current[0].className.replace(" active-button", "");
  this.className += " active-button";
  });
}
</script>

</body>
</html>

Is there a way for me to modify the color of the currently selected button?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

employing express.json() post raw-body

What type of loader is required to manage the output from these loaders?" - What specific loader should be used in this case?

"Troubleshooting: Issues with jQuery Counter Functionality

What is an alternative method to interact with elements in Selenium besides using Driver.get?

Creating Styles in Material-UI using makeStyles: Tips for Styling by Element Name

Kids in the realm of useCallback are stuck in dependency pur

How can I create a Bootstrap button with a custom href link in my code

Revamp the angular design of the mat-tree UI bottom border line issue

"React Bootstrap column showing gaps on the sides instead of filling the entire

Is there a way to trigger an Axios response without repeated calls or the use of a button?

What is the best method for extracting one specific data point from a database table?

What is the best way to compare my filter search input with my regular expression?

Combining PHP and MySQL with a join statement

Acknowledge that a checkbox was found to be unchecked while editing a php/html form

Incorporate a genre twist in animated films

Pricing determined by location on a website created with HTML

Error Encountered: Unable to Locate 'bootstrap' label in Bootstrap 5 Popover

Create an HTTP-only cookie from the resolver function in Apollo GraphQL

retrieving the site's favicon icon

bourbon neat quadrilateral layout