HTML按鈕點擊屬性改變

我有4個簡單的按鈕。我怎麼能設置它們，所以當它們中的一個被點擊時，它有一些屬性會改變並保持改變？當其他按鈕被點擊時，它會改變它，但它會將第一個按鈕的屬性恢復爲「正常」？基本上，他們是導航按鈕，我希望他們顯示你的網頁的哪一部分。先謝謝你。HTML按鈕點擊屬性改變

來源

2012-12-25 user1880779

你可以使用jQuery ？ –

@MahdiParsa是的，我可以使用jQuery，但不知道如何做到這一點。我沒有嘗試太多，因爲我沒有一個大概的想法如何去做。 – user1880779

我希望我們正在談論texty元素，它們被設計爲* look *而不是實際的表單元素按鈕。 – cimmanon

我做了一個樣本點擊僅更改背景顏色：

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）

這裏是一個DEMO

來源

2012-12-25 16:09:54

你讓這聽起來像這不可能與香草JS完成。 – cimmanon

什麼是「關閉」所有其他按鈕的最佳方式，所以具有不同背景的唯一按鈕是您單擊的按鈕？如果你點擊另一個，第一個變回正常？ – user1880779

是的，我改變背景只有你可以使用jquery的所有api纔有可能。 –

我會做的是編寫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中測試了這段代碼，它工作正常）。

來源

2012-12-25 16:18:36 Tom

謝謝你生病了試試吧 – user1880779

利用類來切換按鈕的狀態。喜歡的東西：

<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 
    }); 
}

見a working fiddle

來源

2012-12-25 16:24:11 m90

謝謝謝謝 – user1880779

HTML按鈕點擊屬性改變

回答

相關問題