JQuery добавить класс к активной вкладке родительского элемента

Question

У меня есть этот JQuery, который отображающее содержимое при щелчке DIV ...

<ul> 
    <li class="tab"><a class="link" href="#" data-rel="content1">Link 1</a></li> 
    <li class="tab"><a class="link" href="#" data-rel="content2">Link 2</a></li> 
    <li class="tab"><a class="link" href="#" data-rel="content3">Link 3</a></li> 
    <li class="tab"><a class="link" href="#" data-rel="content4">Link 4</a></li> 
    <li class="tab"><a class="link" href="#" data-rel="content5">Link 5</a></li> 
</ul> 

<div class="content-container"> 
    <div id="content1">This is the test content for part 1</div> 
    <div id="content2">This is the test content for part 2</div> 
    <div id="content3">This is the test content for part 3</div> 
    <div id="content4">This is the test content for part 4</div> 
    <div id="content5">This is the test content for part 5</div> 
</div> 

$(".link").click(function() { 
    $('.content-container div').fadeOut('slow'); 
    $('#' + $(this).data('rel')).fadeIn('slow'); 
}); 

http://jsfiddle.net/mjj70qjk/

Это работает прекрасно, что я хочу сделать теперь, хотя добавляет класс в li для любой активной вкладки, чтобы я мог ее стилизовать. У меня есть это ...

 jQuery(document).ready(function() { 
jQuery(function() { 
    jQuery(".link").click(function() { 
     if(jQuery(this).hasClass('active')) { 
     return; 
     } 

     jQuery(".link").removeClass('active'); 
     jQuery(this.parentNode).addClass('active'); 

     jQuery('.content-container div').fadeOut('slow'); 
     jQuery('#' + jQuery(this).data('rel')).fadeIn('slow'); 
    }); 
}); 
}); 

Что работает, но он не удаляет класс, где я иду не так?

Answer 1

Добавьте эту строку:

jQuery('.active').removeClass('active'); 

вместо:

jQuery(".link").removeClass('active'); 

Answer 2

Вы должны удалить класс от родительского

//no need to have $(document).ready(fn) and $(fn), they are the same 
 
jQuery(function ($) { 
 
    var $links = $(".link").click(function() { 
 
    if ($(this).hasClass('active')) { 
 
     return; 
 
    } 
 

 
    $links.parent().removeClass('active'); 
 
    $(this.parentNode).addClass('active'); 
 

 
    $('.content-container div').fadeOut('slow'); 
 
    $('#' + jQuery(this).data('rel')).fadeIn('slow'); 
 
    }); 
 
});

.content-container { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 
.content-container div { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.active .link { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="tab"><a class="link" href="#" data-rel="content1">Link 1</a></li> 
 
    <li class="tab"><a class="link" href="#" data-rel="content2">Link 2</a></li> 
 
    <li class="tab"><a class="link" href="#" data-rel="content3">Link 3</a></li> 
 
    <li class="tab"><a class="link" href="#" data-rel="content4">Link 4</a></li> 
 
    <li class="tab"><a class="link" href="#" data-rel="content5">Link 5</a></li> 
 
</ul> 
 

 
<div class="content-container"> 
 
    <div id="content1">This is the test content for part 1</div> 
 
    <div id="content2">This is the test content for part 2</div> 
 
    <div id="content3">This is the test content for part 3</div> 
 
    <div id="content4">This is the test content for part 4</div> 
 
    <div id="content5">This is the test content for part 5</div> 
 
</div>

Answer 3

Вы удаляете класс от .link

jQuery(".link").removeClass('active'); 

но вы добавляете класс к родителю

jQuery(this.parentNode).addClass('active'); 

Answer 4

Изменение this.parentNode только this. Это то, что я сделал в вашем примере, и я думаю, что это тот результат, который вам нужен.

http://jsfiddle.net/mjj70qjk/2/