从分离的div容器中的链接中删除类

我遇到了一些问题，试图从链接和他们的兄弟姐妹添加/删除类。我有3组链接，其中包含<div class="collapse_content"> ... </div>。我能够让jQuery从同一个容器中的链接中添加和删除“Selected”类，但是如果我选择了另一个容器（组）中的链接，那么之前选择的链接将不会删除它的类。从分离的div容器中的链接中删除类

组中的每个链接都将页面加载到iframe中，所以它们都是静态链接。我在每个链接组之上的jQuery中也有一个折叠切换功能。帮助我弄清楚为什么jQuery不会从前一个链接中删除与新选择的链接不同的组中的'selected'类。

感谢您使用advanc即

下面是我到目前为止的代码。

--jQuery--

$(function() { 

//Add 'selected' class to A tag within class collapse_content 
$('.collapse_content a').on('click', function(e){ 
$(this).addClass('selected').siblings().removeClass('selected'); 
$(this).find('.collapse_content a').removeClass('selected'); 
}); 

//toggle the componenet with class collapse_tab 
$(".collapse_tab").click(function() { 
$(this).next(".collapse_content").slideToggle(500); 
}); 
});

--HTML--

<div class="collapse_tab">Group 1</div> 
    <div class="collapse_content"> 
     <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br> 
     <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br> 
     <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br> 
     <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br> 
    </div> 

<div class="collapse_tab">Group 2</div> 
    <div class="collapse_content"> 
     <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br> 
     <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br> 
     <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br> 
     <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br> 
    </div> 

<div class="collapse_tab">Group 3</div> 
    <div class="collapse_content"> 
     <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br> 
     <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br> 
     <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br> 
     <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br> 
    </div> 

<div class="collapse_tab">Group 4</div> 
    <div class="collapse_content"> 
     <a href="Link 1.asp" onclick="return handlelink(this)">Link 1</a><br> 
     <a href="Link 2.asp" onclick="return handlelink(this)">Link 2</a><br> 
     <a href="Link 3.asp" onclick="return handlelink(this)">Link 3</a><br> 
     <a href="Link 4.asp" onclick="return handlelink(this)">Link 4</a><br> 
    </div>

--CSS--

.collapse_tab { 
    text-decoration:none; 
    font-weight:bold; 
    background-color:#0cf; 
    color:#FFF; 
    font-size:11px; 
    padding: 2px; 
    margin:0px; 
    text-align:center; 
    border:1px solid #09f; 
    cursor: pointer; 
} 

.collapse_content {  
    font:Verdana, Arial, Helvetica, sans-serif; 
    margin: 0px; 
    padding: 0px; 
    font-size: 10px; 
    background-color:#0cf; 
    border:#fff 1px solid; 
}

来源

2012-07-09 xxstevenxo

试试这个

$(function() { 

//Add 'selected' class to A tag within class collapse_content 
$('.collapse_content a').on('click', function(e){ 
    $('.collapse_content a').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

//toggle the componenet with class collapse_tab 
$(".collapse_tab").click(function() { 
    $(this).next(".collapse_content").slideToggle(500); 
}); 
});

来源

2012-07-09 18:52:59

这是因为在你的jQuery中，你使用的是'this'，它只代表包含你点击链接的div。如果您希望事件处理程序从所有链接中删除类，而不管它们处于哪个'collapse_content'div，只需使用$（'。collapse_content a'）作为选择器而不是'this'。

来源

2012-07-09 18:58:56 smilebomb

从分离的div容器中的链接中删除类

回答

相关问题