0

いくつかのカスタマイズされたボタンをマーケティング調査アプリケーションにインポートしようとしています。特定の機能を備えた 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;
}
4

2 に答える 2

1

まず、同じid;を持つ 2 つの要素があります。これは無効な HTML です:ドキュメント内で一意であるid 必要があります。複数の要素に同じスタイルを共有させたい場合は、class代わりに -name を使用してください。とはいえ、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 フィドルのデモ。

上記は、要素が常に兄弟であることを前提としています。そうでない場合：

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

JS フィドルのデモ。

参考文献:

于 2013-05-25T20:00:28.233 に答える
0 
$(document).ready(function(){
     $('a').click(function(){
         // reset all buttons to un-clicked state
         $('a').removeClass('clicked');
         $(this).toggleClass('clicked');
     });
});
于 2013-05-25T20:00:37.137 に答える