CODEWITHSUNDEEP
jqueryhtml
user3101582
user3101582

Reputation: 57

Add class to parent anchor in jQuery

i am getting stuck with adding class to parent anchor on click event

CSS

<style type='text/css'>
.pro_nav li a{
   color:#949494;
}
.pro_nav li a:hover, .pro_nav li a.active{
  color:#ffbe1b;
}

JS CODE

<script type='text/javascript'>
$(function(){
$('.pro_info').hide();
$('.pro_info:first').show();
$('.pro_nav ul li a:first').addClass('active');
$('.pro_nav ul li a').click(function(){
$('.pro_nav ul li a').removeClass('active');
$(this).parent().addClass('active'); // this line not working
var Protab = $(this).attr('href');
$('.pro_info').hide();
$(Protab).fadeIn(1000);
return false;
});
});

HTML CODE

<div class="pro_nav">
 <ul>
     <li><a href="#qa">q&a </a></li>
        <li><a href="#galleries">galleries</a></li>
        <li><a href="#wishlist">wishlist</a></li>
     </ul>
</div>

I want to apply active class on anchor parents

Upvotes: 0

Views: 1180

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

The problem is the css rule is not specified for the li element, it is for the anchor element (.pro_nav li a.active)

$('.pro_nav ul li a').click(function () {
    $('.pro_nav ul li a').removeClass('active');
    $(this).addClass('active');
    var Protab = $(this).attr('href');
    $('.pro_info').hide();
    $(Protab).fadeIn(1000);
    return false;
});

Demo: Fiddle

Upvotes: 1

Related Questions