保持按钮:单击后激活

Question

我是新手，所以这可能是一个愚蠢的问题，但我如何保持一个按钮:点击后激活？

我不知道这是否改变了awnser，但是我有一个侧边栏，有5个按钮，4个有功能使一个div显示，其他的隐藏，另一个按钮是一个手风琴。

HTML

​

  <content class="menu">
    <button onclick="myFunction1();">Home</button>
    <br>
    <button onclick="myFunction2();">About</button>
    <br>
    <button class="accordion">Work</button>
      <content class="panel">
         <button id="submenu" class="Work1" onclick="myFunction3();">Work1</button>
      </content>
    <button onclick="myFunction4();">Contacts</button>
  </content>

​

CSS

​

content.panel {
    display: none;
}

​

Java

​

      function myFunction1() {
        document.getElementById("Home").style.display = "block";
        document.getElementById("About").style.display = "none";
        document.getElementById("Work1").style.display = "none";
        document.getElementById("Contacts").style.display = "none";
    }

    function myFunction2() {
      document.getElementById("Home").style.display = "none";
      document.getElementById("About").style.display = "block";
      document.getElementById("Work1").style.display = "none";
      document.getElementById("Contacts").style.display = "none";
    }

    function myFunction3() {
      document.getElementById("Home").style.display = "none";
      document.getElementById("About").style.display = "none";
      document.getElementById("Work1").style.display = "block";
      document.getElementById("Contacts").style.display = "none";
    }

    function myFunction4() {
      document.getElementById("Home").style.display = "none"; 
      document.getElementById("About").style.display = "none";
      document.getElementById("Work1").style.display = "none";
      document.getElementById("Contacts").style.display = "block";
}

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}

​

Answer 1

您可以在单击按钮时使用jQuery向按钮添加一个类。或者改变按钮文本的颜色、添加/改变边框、添加/改变背景颜色等，

​

$('button').on('click', function(){
    $('button').removeClass('active_button');
    $(this).addClass('active_button');
});

//Home button active on page load
$(document).ready(function(){
    $('#Home').addClass('active_button');
});

.active_button{
  background-color: #999;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<button id="Home">Home</button>
<button>About</button>
<button>Work</button>  
<button>Work1</button>
<button>Contacts</button>

​