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

您是从。链路

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

删除类，但要添加类其父

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

Answer 4

变化this.parentNode只this。这就是我在你的例子中所做的，我认为这是你需要的结果。

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