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，您可以这样做:

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

Demonstration

如果你想将链接父级的类应用到 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 中)，代码应该嵌入到你 body 末尾脚本中的准备回调中:

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