我有三个手动设置类的链接:一个默认为.active
,其他默认为.inactive
。我有一些jQuery,我用它来切换链接的类,当它们被点击为CSS目的。这适用于.inactive
个链接 - 它们会切换到.active
。但是,它不适用于默认的.active
链接。如果我点击默认的.active
链接,它将保持不活动状态。
默认加载:
链接1 - 活动 链接2 - 无效 链接3 - 无效
点击链接2:
链接1 - 无效 链接2 - 活动 链接3 - 无效
点击链接2中的链接1:
链接1 - 无效 链接2 - 活动 链接3 - 无效
如何完成此循环以使其有效?
以下是我正在生成的HTML:
<ul id="infoContainer">
<li><a href="/profiles/1/profile_cred" class="active" data-remote="true">Cred</a></li>
<li><a href="/profiles/1/profile_about" class="inactive" data-remote="true">About</a></li>
<li><a href="/profiles/1/profile_questions" class="inactive" data-remote="true">Questions</a></li>
</ul>
我正在使用的jQuery:
$(function(){
var sidebar=$('#sidebar');
sidebar.delegate('a.inactive', 'click',function(){
sidebar.find('.active').toggleClass('active inactive');
$(this).toggleClass('active inactive');
});
});
答案 0 :(得分:2)
如果我确实让你纠正,那么你的选择器太严格了:只处理inactive
链接
试过以下几点?
$(function(){
var sidebar=$('#sidebar');
sidebar.delegate('a', 'click',function(){
sidebar.find('.active').toggleClass('active inactive');
$(this).addClass('active').removeClass('inactive');
});
});