I tested out the script below in jsfiddle and it works fine, can someone guide me how to fix it? This is the url that I need it working in, the wizard style menu at the top right should should have each item set to active when clicked and then removed when another menu item is clicked: .html

Here is the code I am using for this:

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

I tested out the script below in jsfiddle and it works fine, can someone guide me how to fix it? This is the url that I need it working in, the wizard style menu at the top right should should have each item set to active when clicked and then removed when another menu item is clicked: http://morxmedia./clients/temp/45p/index_vertical.html

Here is the code I am using for this:

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

• javascript
• jquery
• html
• css

• given link does not add active class to any div – xkeshav Commented Jun 27, 2012 at 8:45

5 Answers 5

You are binding the click event to div elements when you should bind them to a elements like so

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

Try this.

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

better to include that on a ready

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

As far as I can see (in your CSS). The class active should go on the div under wizard-steps and the parent of the a-tag.

Try this:

<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>

It can be done in another way using jquery using .not()

Jquery Code:

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

Demo: http://jsfiddle/surendraVsingh/PLbbr/