在新按鈕上點擊鏈接/按鈕顏色點擊

我正在嘗試將一些自定義按鈕導入到市場調查應用程序中。我想設置一些帶CSS和JQuery的按鈕，並帶有一些特定的功能。在新按鈕上點擊鏈接/按鈕顏色點擊

我需要按鈕更改外觀並保持點擊。我已經能夠使用下面的代碼來完成此操作。

我需要幫助創建一個函數，它可以在將新選擇的按鈕更改爲「單擊」狀態時將任何先前選擇的按鈕返回到原始狀態。

詳細幫助將不勝感激！

HTML：

<body> 
<a href="#" ID="button">Test Link 1</a><link href="newStyleSheet.css" rel="stylesheet" type="text/css" /> 

<a href="#" ID="button">Test Link 2</a><link href="newStyleSheet.css" rel="stylesheet" type="text/css" /> 

<script src="jquery.min.js" type="text/javascript"></script> 


<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('a').click(function(){ 
     $ (this).toggleClass('clicked'); 
    }); 
    }); 
</script> 
</body>

CSS：

a#button{ 
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    box-shadow:inset 0px 1px 0px 0px #ffffff; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); 
    background:-moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); 
    background-color:#ededed; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #dcdcdc; 
    display:inline-block; 
    color:#777777; 
    font-family:arial; 
    font-size:15px; 
    font-weight:bold; 
    text-decoration:none; 
    text-shadow:1px 1px 0px #ffffff; 
    width: 160px; 
    padding-top: 6px; 
    padding-right: 24px; 
    padding-bottom: 6px; 
    padding-left: 24px; 
    text-align: center; 
    vertical-align: middle; 
    margin-right: 30px; 
    margin-left: 30px; 
} 
a.clicked#button{ 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e5c9ab), color-stop(1, #d95936)); 
    background:-moz-linear-gradient(center top, #e5c9ab 5%, #d95936 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5c9ab', endColorstr='#d95936'); 
    background-color:#dfdfdf; 
    text-shadow:1px 1px 0px #777777; 
    color:#ffffff; 
}

來源

2013-05-25 Robert Anderson

首先，你必須使用相同的id兩個元素;這是無效的HTML：一個id必須在文檔中是唯一的。如果您想要多個元素共享相同的樣式，請改爲使用class-名稱。這就是說，我已經修改你的HTML：

<a href="#" class="button">Test Link 1</a> 
<a href="#" class="button">Test Link 2</a>

至於你的jQuery我建議：

$('a.button').click(function(e){ 
    e.preventDefault(); 
    $(this).addClass('clicked').siblings().removeClass('clicked'); 
});

JS Fiddle demo。

以上假設元素將始終是兄弟;如果它們不是：

$('a.button').click(function(e){ 
    e.preventDefault(); 
    $('a.clicked').removeClass('clicked'); 
    $(this).addClass('clicked'); 
});

JS Fiddle demo。

參考文獻：

addClass()。
click()。
Element identifiers: the id and class attributes (W3.org)。
event.preventDefault()。
removeClass()。
siblings()。

來源

2013-05-25 20:00:28

太棒了，正是我需要的！ –

我很高興得到了幫助！ =] –

$(document).ready(function(){ 
    $('a').click(function(){ 
     // reset all buttons to un-clicked state 
     $('a').removeClass('clicked'); 
     $(this).toggleClass('clicked'); 
    }); 
});

來源

2013-05-25 20:00:37

在新按鈕上點擊鏈接/按鈕顏色點擊

回答

相關問題