jquery - jQuery on click change 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()); 
});

示范

如果您想将链接父级的类应用于 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 中）时，代码应该嵌入到您正文末尾的脚本中的就绪回调中：

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