javascript - 将类设置为活动并在选择另一个菜单项时将其删除错误

Question

我在 jsfiddle 中测试了下面的脚本，它工作正常，有人可以指导我如何修复它吗？这是我需要它工作的 url，右上角的向导样式菜单应该在单击时将每个项目设置为活动状态，然后在单击另一个菜单项时将其删除：http: //morxmedia.com/clients/temp /45p/index_vertical.html

这是我为此使用的代码：

    <script type="text/javascript">
      $('.wizard-steps div').click(function(e) {
            e.preventDefault();
            $('a').removeClass('active');
            $(this).addClass('active');
        });
    </script>

Answer 1

div当您应该将click 事件绑定到元素时，您正在将它们绑定到这样的a元素

$(document).ready(function(){
    $('.wizard-steps > div > a').click(function(e) {
        e.preventDefault();
        $('a').removeClass('active');
        $(this).addClass('active');
    });
});

Answer 2

尝试这个。

$(function() {
    $('.wizard-steps div').click(function(e) {
       e.preventDefault();
       $(this).addClass('active').siblings().removeClass('active');
    });
});

Answer 3

据我所知（在你的 CSS 中）。该类active应该放在-tag下的 divwizard-steps和父级上。a

尝试这个：

<script type="text/javascript">
$('.wizard-steps div a').click(function(e) {
    if (e.preventDefault)
        e.preventDefault();
    else
        e.stop();

    $('.wizard-steps div').removeClass('active');
    $(this).parent().addClass('active');
});
</script>

Answer 4

最好将其包含在准备好的

$(document).ready(function() {
  $('.wizard-steps div').click(function(e) {
        e.preventDefault();
        $('a').removeClass('active');
        $(this).addClass('active');
    });
});

Answer 5

可以使用 jquery 以另一种方式完成.not()

jQuery代码：

$('.wizard-steps div').click(function() {
          $('.wizard-steps div').not(this).removeClass('active');
          $(this).addClass('active');
});

演示：http: //jsfiddle.net/surendraVsingh/PLbbr/