html - クリック時のHTMLボタンプロパティが変更されました

Question

シンプルなボタンが4つあります。それらの1つがクリックされたときに、変更されたままのプロパティを持つように設定するにはどうすればよいですか？そして、それらのボタンの別のものがクリックされると、同じように変更されますが、最初のボタンのプロパティが「通常」に戻りますか？基本的にはナビゲーションボタンで、ページのどの部分にいるのかを表示してほしいです。前もって感謝します。

Answer 1

クリックして背景色のみを変更するためのサンプルを作成しました。

CSS

.beforeClick {
    background-color:#EEE;
}

JavaScript

$(document).ready(function (){
   $('.beforeClick').click(function (){
       $('.beforeClick').css('background-color',"#EEE");
           $(this).css('background-color',"#555");
   });
});

HTML

<button class="beforeClick">btn1</button>
<button class="beforeClick">btn2</button>
<button class="beforeClick">btn3</button>
<button class="beforeClick">btn4</button>
<button class="beforeClick">btn5</button>

（jQueryが必要です）

これがデモです

Answer 2

クラスを利用して、ボタンの状態を切り替えます。何かのようなもの：

<div class="button">PRESS</div>
....
<div class="button">PRESS</div>

の別のクラスだけが必要であり.selected、数行のバニラ JavaScript でシナリオをカバーできます。

var buttons = document.getElementsByClassName('button');

for (var i = 0; i < buttons.length; i++) { //loop through all buttons
    buttons[i].addEventListener('click', function() {
        if (document.getElementsByClassName('selected').length) { //check if we already have a selected element
            document.getElementsByClassName('selected')[0].className = document.getElementsByClassName('selected')[0].className.replace(/(?:^|\s)selected(?!\S)/g, ''); //remove selected class from "old" element
        }
        this.className += ' selected'; //add selected class to element that has been clicked / called the handler
    });
}​

働くフィドルを見る

Answer 3

私がすることは、次のようなJavaScript関数を書くことです:

     <script type='text/javascript'>
     function toggle(btn)
     {
          var btnArray = document.getElementsByClassName('button');
          for(i = 0; i < btnArray.length; i++)
          {
              if(btn == btnArray[i])
              {
                  //the button is the button which is clicked
                  if(!btn.classList.contains("clicked"))
                  {
                      btn.className += " clicked";
                  }
              }
              else
              {
                  //remove class clicked, just reset the classname
                  btnArray[i].className = "button";
              }
          }


     }

     </script>

     <button class="button" onclick="toggle(this);">btn1</button>
     <button class="button" onclick="toggle(this);">btn2</button>
     <button class="button" onclick="toggle(this);">btn3</button>

css に「クリックされた」クラスの説明を追加できます。

    .clicked{
        background-color: red;
    }

(このコードを Chromium でテストしたところ、動作しました)。