如何更改活動按鈕的顏色？

Question

所以我試圖基本上改變當前處於活動狀態的按鈕顏色。 我嘗試創建一個名為“activePage”的 css 類並將其添加到單擊的任何按鈕。 但這並沒有奏效。

所以基本上，如果您單擊“項目”按鈕，它應該將該按鈕的顏色更改為紅色，如果您單擊“關於”按鈕，它應該將該按鈕更改為紅色並將“項目”按鈕更改回其原始顏色。

 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

您的點擊功能超出了 jQuery 的范圍。

我剪掉了不相關的代碼，所以不要只是復制和粘貼。

我更改了 HTML，因此它不使用 onClick，而綁定發生在 jQuery 的 ready 函數中。 此外，我修改了 CSS 以定位實際負責文本樣式的錨標簽。

請參閱我在下面對您的代碼段進行的重構：

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

CSS 中有一個“active”屬性，允許您更改元素的顏色和其他特征。

例子：

button:active{
    background:olive;
}

button:focus{
    background:olive;
}

希望這可以幫助

Answer 3

homeTransition 中的“this”變量和所有其他引用 window 對象的函數。

您可以通過以下方式修復代碼：

將 HTML 中的 onclick 函數調用更改為：

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

並通過在 js 文件中添加事件論證：

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>