CSS切換按鈕？

在PhoneGAP中可以有CSS切換按鈕嗎？我想要一個改變顏色的按鈕，如果點擊後再次點擊，它必須回到默認顏色。任何想法如何做到這一點？CSS切換按鈕？

我已經編輯了我的帖子，我可以很容易地迴應你們，幫助我，因爲現在我對如何做到這一點，簡單的東西，但訣竅非常困惑。

`This the function 

    function toggle(ths) { 

    //CSS color 
    $(ths).toggleClass("btnColor"); 
    $("#tb").toggleClass("btnColorR") 

    //Get value clicked 
    var clicked = $(ths).val(); 

    //diplay on web-page 
    $("#lblType").html(clicked); 
    $("#setCount").html(" minutes : " + minutes + " seconds : " + seconds); 

    //duration time count 
    seconds = seconds + 1; 
    if (seconds % 60 == 0) { 
     minutes += 1; 
    seconds = 0; 
} 
     timer = setTimeout("toggle()", 1000); 
    } 


The CSS 

.btnColor 
{ 
background-color:blue; 
color:white; 
} 
.btnColorR { 
background-color:green; 
} 


    This is how my buttons are created. 

function createButtons(tbID, tbClass, tbType, tbValue, onClick) { 
    return '\n<input ' 
     + (tbID ? ' id=\'' + tbID + '\'' : '') 
     + (tbClass ? ' class=\'' + tbClass + '\'' : '') 
     + (tbType ? ' type=\'' + tbType + '\'' : '') 
     + (tbValue ? ' value=\'' + tbValue + '\'' : '') 
     + (onClick ? ' onclick=\'toggle(this);' + onClick + '\'' : '') 
     + '>'; 
} 

function DisplayButtons(cableData) { 
    var newContent = ''; 
    $.each(cableData, 

    function (i, item) { 
     newContent += createButtons("tb" + item.CommonCable, null, "submit",  item.CommonCable, toggle); 
    }); 
    $("#planned").html(newContent); 
}`

來源

2013-04-04 C_Major

認爲你的按鈕是#butt：

$("#butt").click(function(){ 
    $(this).toggle('red'); 
})

和CSS：

.red{ 
color:red; 
}

來源

2013-04-04 06:52:13

謝謝很多人，但它仍然無法正常工作，我的css工作之前，我搬到了Phonegap我不知道這是發生的呃，甚至想也許我現在瘋了。再次感謝 – 2013-04-04 07:42:22

看看'$（「＃butt」）。click（function（）{alert（1）}）;'一切正常。 – 2013-04-04 07:46:20

它不工作，我可以編輯我的文章，幷包括代碼如何我的按鈕創建與css – 2013-04-04 08:31:33

的PhoneGap是一個庫，它可以幫助您的移動網絡應用程序有一個本地appliccation的所有功能。因此，爲了設計您的應用程序，您可以使用任何類似html或任何js框架，如Sencha，Jquery，YUI，JQM等。並使用phonegap製作應用程序包。

您將能夠使用Phonegap類訪問所有本機功能，如相機，通訊錄，acclerometers..etc。所以你的CSS切換按鈕將在任何情況下工作。 Phonegap不會做任何事情。

來源

2013-04-04 07:06:49

非常感謝，我今天學到了新東西 – 2013-04-04 07:43:10

function toggle(ths) 
{ 
    if ($(ths).attr('class') == "btnColor") { 
     $(ths).removeClass("btnColor"); 
     $(ths).addClass("btnColorR"); 
    } else { 
     $(ths).removeClass("btnColorR"); 
     $(ths).addClass("btnColor"); 
    } 
} 

function createButtons(tbID, tbClass, tbType, tbValue, onClick) 
{ 
    return '\n<input ' 
    + (tbID ? ' id=\'' + tbID + '\'' : '') 
    + (tbClass ? ' class=\'' + tbClass + '\'' : '') 
    + (tbType ? ' type=\'' + tbType + '\'' : '') 
    + (tbValue ? ' value=\'' + tbValue + '\'' : '') 
    + (onClick ? ' onclick=\''+onClick(this)+';\'' : '') 
    + '>'; 
}

來源

2013-04-04 10:56:23 Sagar

它工作正常時，即時消息不使用PhoneGap，但一旦我嘗試在PhoneGap它不起作用。我想我需要一些時間與PHoneGap書籍 – 2013-04-04 12:35:46

我不認爲你需要JS，因爲它可以用CSS來完成，而這取決於你的瀏覽器矩陣。基本上你使用複選框，隱藏它，並設計你需要的標籤。然後，您可以通過clivk上的:checked和:not(:checked)選擇器切換樣式（請務必檢查瀏覽器支持）。演示：http://custom-inputs.felixhagspiel.de/

我寫了一個關於如何自定義複選框和收音機與CSS只，以及創建開/關切換開關教程。也許這有助於:)你可以根據需要改變樣式。閱讀教程在這裏：http://blog.felixhagspiel.de/index.php/posts/custom-inputs

來源

2015-01-19 11:19:11

CSS切換按鈕？

回答

相關問題