jQuery在div上单击更改切换类

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应用于div，您可以这样做：

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

Demonstration

如果您想将div的父级类应用于div，您可以这样做：

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

Demonstration

如果你想根据链接的数量向div申请一个类，你可以这样做：

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

Demonstration

当你在真正的应用程序中时（即不在jsfiddle中），代码应该嵌入到身体末端的脚本中的准备回调中：

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