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/