jquery - クリック時のjQuerydivのトグルクラスの変更

Question

私は4つのhrefを持っており、クリックするとdivのクラスを変更する必要があります。

次に例を示します。-リンク1をクリック=divクラスがs1に変更されます-リンク2をクリック=divクラスがs2に変更されます-リンク3をクリック=divクラスがs3に変更されます

などなど、以下にいくつかのコードがありますが、jQueryについては、学習しているだけなのでわかりません。

http://jsfiddle.net/Nh7tn/1/

<div class="vehicleJourney">
    <div id="progress">
        <div id="complete" class="s2"><!--need class to change -->
            <div id="marker"></div>
        </div>
    </div>

    <div class="buttons">
      <ul>
        <li class="s1"><a  class="showSingle" data-target="1">s1</a></li>
        <li class="s2"><a  class="showSingle selected" data-target="2">s2</a></li>
        <li class="s3"><a  class="showSingle" data-target="3">s3</a></li>
        <li class="s4"><a  class="showSingle" data-target="4">s4</a></li>
      </ul>
    </div>

</div>​

乾杯

Answer 1

リンクのテキスト内のクラスを div に適用する場合は、次のようにします。

$('a.showSingle').click(function(){
   $('#complete').attr('class', $(this).text()); 
});

デモンストレーション

リンクの親のクラスを div に適用する場合は、次のようにします。

$('a.showSingle').click(function(){
   $('#complete').attr('class', $(this).parent().attr('class')); 
});

デモンストレーション

リンクの番号から計算されたクラスを div に適用する場合は、次のようにします。

$('a.showSingle').click(function(){
   $('#complete').attr('class', 's'+($(this).parent().index()+1)); 
});

デモンストレーション

実際のアプリケーションを使用している場合 (つまり、jsfiddle を使用していない場合)、コードは body の末尾にあるスクリプトの Ready コールバックに埋め込む必要があります。

<script>
    $(function(){
       $('a.showSingle').click(function(){
          $('#complete').attr('class', 's'+($(this).parent().index()+1)); 
       });
    });
</script>

Answer 2

これを試して：

$(document)​.ready(function() {
    $('.showSingle').click(function() {
        $('#complete').attr('class', '').addClass('s' + $(this).data('target'));
    });
});​

Answer 3

更新されたjsfiddleを参照してください

$('.showSingle').click(function(){$('#complete').attr('class',$(this).html());});

Answer 4

それはうまくいくはずです

$("li a").click(function(){
  var classname=$(this).text();
  $("#complete").attr("class",classname);
});