How can I change the color of the active button?

Question

So I am trying to basically change the button that is currently actives color. I have tried to create a css class called "activePage" and add it to whichever button is clicked on. But that has not worked.

So basically if you click the "projects" button it should change the color of that button to red, and if you click the "about" button it should change that button to red and change the "projects" button back to its original color.

 function homeTransition() { $(this).toggleClass('activePage'); if(document.getElementById("aboutContent").className.indexOf("slideInLeft") !== -1){ document.getElementById("aboutContent").className = " animated slideOutLeft"; } if(document.getElementById("projectsContent").className.indexOf("slideInLeft") !== -1){ document.getElementById("projectsContent").className = " animated slideOutLeft"; } if(document.getElementById("contactContent").className.indexOf("slideInLeft") !== -1){ document.getElementById("contactContent").className = " animated slideOutLeft"; } document.getElementById("astronaut").className = " animated fadeIn"; } function aboutTransition() { document.getElementById("astronaut").className = " animated fadeOut"; document.getElementById("aboutContent").className = "activePage animated slideInLeft"; document.getElementById("projectsContent").className = " animated fadeOutLeft"; document.getElementById("contactContent").className = " animated fadeOutLeft"; } function projectsTransition() { $(this).toggleClass('activePage'); document.getElementById("astronaut").className = " animated fadeOut"; document.getElementById("projectsContent").className = "activePage animated slideInLeft"; document.getElementById("aboutContent").className = " animated fadeOutLeft"; document.getElementById("contactContent").className = " animated fadeOutLeft"; } function contactTransition() { $(this).toggleClass('activePage'); document.getElementById("astronaut").className = " animated fadeOut"; document.getElementById("contactContent").className = "activePage animated slideInLeft"; document.getElementById("aboutContent").className = " animated fadeOutLeft"; document.getElementById("projectsContent").className = " animated fadeOutLeft"; } //Menu function expand(){ $(this).toggleClass("on"); $(".menu").toggleClass("active"); }; $(".button").on('click', expand);

 body { font-family: "Source Sans Pro", sans-serif; color: #ccc; z-index: -100; background-color: black; overflow: hidden; } #aboutContent { 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; } #projectsContent { 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; } #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); transform: translateZ(0) translateX(0); -webkit-transition: 0.4s; transition: 0.4s; color: #e5e5e5; } .activePage { color: red; } h1 { margin-top:60%; font-size: 2.5em; cursor: default; } ul { padding:0; list-style:none; font-size:16px; } li { padding:10px 10px; } a { text-decoration:none; padding:10px 15px; color:#fff; font-family:'Lato'; font-size: 1.5em; font-weight: 300; } a:hover { color: #0dffec; } .content { position:relative; width:300px; } .button { width:20px; height:40px; margin:24% 36%; padding: 14px; cursor:pointer; transition: all .2s ease-in-out; } .button:hover { transform: scale(1.2); } .line { width: 40px; height: 2px; background-color: #fff; transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease; } .line.first { transform: translateX(-10px) translateY(22px) rotate(-90deg); } .line.second { transform: translateX(-10px) translateY(19px) rotate(0deg); } .button.on .line.top { transform: translateX(-10px) translateY(20px) rotate(45deg); } .button.on .line.bottom { transform: translateX(-10px) translateY(17px)rotate(-45deg); }

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Home</title> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway|Lato" rel="stylesheet"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/animate.css"> </head> <body> <img id="astronaut" src="images/astronaut.png"> <div id="wrapper"> <div class="menu"> <h1>Title</h1> <ul> <div id="home" onclick="homeTransition()" class="noselect"><li><a href="#home"><i class="fa fa-home"></i> home</a></li></div> <div id="about" onclick="aboutTransition()" class="noselect"><li><a href="#about"><i class="fa fa-user"></i> about</a></li></div> <div id="projects" onclick="projectsTransition()" class="noselect"><li><a href="#projects"><i class="fa fa-code"></i> projects</a></li></div> <div id="contact" onclick="contactTransition()" class="noselect"><li><a href="#contact"><i class="fa fa-paper-plane"></i> contact</a></li></div> </ul> </div> <div class="content animated fadeInDown"> <div class="button"> <div class="line first top"></div> <div class="line second bottom"></div> </div> </div> <div id="aboutContent"> </div> <div id="projectsContent"> </div> <div id="contactContent"> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script type="text/javascript" src="js/transition.js"></script> <script type="text/javascript" src="js/background.js"></script> </body> </html>

Answer 1

Your click functions are out of jQuery's scope.

I clipped out irrelevant code, so don't just copy and paste.

I change the HTML so it does not use onClick, and the binding happens inside jQuery's ready function instead. In addition, I modified the CSS to target the anchor tage which is actually responsible for the text style.

See the refactoring to your snippet I did below:

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

 body { font-family: "Source Sans Pro", sans-serif; color: #ccc; z-index: -100; background-color: black; overflow: hidden; } #aboutContent { 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; } #projectsContent { 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; } #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); transform: translateZ(0) translateX(0); -webkit-transition: 0.4s; transition: 0.4s; color: #e5e5e5; } .activePage { color: red; } h1 { margin-top: 60%; font-size: 2.5em; cursor: default; } ul { padding: 0; list-style: none; font-size: 16px; } li { padding: 10px 10px; } a { text-decoration: none; padding: 10px 15px; color: #fff; font-family: 'Lato'; font-size: 1.5em; font-weight: 300; } a:hover { color: #0dffec; } .content { position: relative; width: 300px; } .button { width: 20px; height: 40px; margin: 24% 36%; padding: 14px; cursor: pointer; transition: all .2s ease-in-out; } .button:hover { transform: scale(1.2); } .line { width: 40px; height: 2px; background-color: #fff; transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease; } .line.first { transform: translateX(-10px) translateY(22px) rotate(-90deg); } .line.second { transform: translateX(-10px) translateY(19px) rotate(0deg); } .button.on .line.top { transform: translateX(-10px) translateY(20px) rotate(45deg); } .button.on .line.bottom { transform: translateX(-10px) translateY(17px)rotate(-45deg); } .activePage a { color: red; }

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Home</title> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway|Lato" rel="stylesheet"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/animate.css"> </head> <body> <img id="astronaut" src="images/astronaut.png"> <div id="wrapper"> <div class="menu"> <h1>Title</h1> <ul> <div id="home" class="noselect"> <li><a href="#home"><i class="fa fa-home"></i> home</a></li> </div> <div id="about" class="noselect"> <li><a href="#about"><i class="fa fa-user"></i> about</a></li> </div> </ul> </div> <div class="content animated fadeInDown"> <div class="button"> <div class="line first top"></div> <div class="line second bottom"></div> </div> </div> <div id="aboutContent"></div> <div id="projectsContent"></div> <div id="contactContent"></div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script type="text/javascript" src="js/transition.js"></script> <script type="text/javascript" src="js/background.js"></script> </body> </html>

Answer 2

There's an 'active' property in CSS that allows you to change color and other characteristics of your elements.

Example:

button:active{
    background:olive;
}

button:focus{
    background:olive;
}

Hope this helps

Answer 3

'this' variable inside homeTransition and all other functions referring to window object.

You can fix the code by:

Changing onclick function call in HTML to:

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

And by adding event arguement in js file:

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

Answer 4

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

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

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

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

</body>
</html>