CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Stephen
Stephen

Reputation: 717

Set class to active and remove it when another menu item is selected bug

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.com/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>

Upvotes: 1

Views: 2434

Answers (5)

SVS
SVS

Reputation: 4275

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.net/surendraVsingh/PLbbr/

Upvotes: 0

xdazz
xdazz

Reputation: 160963

Try this.

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

Upvotes: 2

OptimusCrime
OptimusCrime

Reputation: 14863

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>

Upvotes: 1

neu-rah
neu-rah

Reputation: 1693

better to include that on a ready 

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

Upvotes: 1

slash197
slash197

Reputation: 9034

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

Upvotes: 3

Related Questions