题
所有我想做到的是要能有其中一个被点击链接的无序列表,父列表项被赋予类“活跃”。一旦另一个链接被点击列表中,对其进行检查,看是否“有效”分配,从列表项删除它,并把它添加到最近被点击的链接父列表项。
示例:
步骤一 - 用户已经点击了该链接“我是链接两个”
<ul>
<li><a href="#">I am link one</a></li>
<li class="active"><a href="#">I am link two</a></li>
</ul>
步骤二 - 用户已经点击了该链接“我是链接一个”
<ul>
<li class="active"><a href="#">I am link one</a></li>
<li><a href="#">I am link two</a></li>
</ul>
很简单,但人我打我。
解决方案
假设:UL元素具有类 'linksList'
$('.linksList li a').click(function()
{
$('.linksList li').removeClass('active');
$(this).parent().addClass('active');
});
其他提示
像下面的内容应该做它
$(function() {
$('li a').click(function(e) {
e.preventDefault();
var $this = $(this);
$this.closest('ul').children('li').removeClass('active');
$this.parent().addClass('active');
});
});
<强> 工作演示 强>
这现在的问题是有点老了,但我认为还是有空间改善。
“传统” 局部事件绑定:
$("ul a").click(function(){
$(this).parent("li").addClass("active")
.siblings().removeClass("active");
# return false to cancel the default action (e.g. follow the link):
return false;
});
现在,通过代理的使用事件代理相同()(jQuery的+1.4.2)。使你可以动态添加额外> LI>一个,而不必重新绑定事件:
$("ul").delegate("a", "click", function(){
$(this).parent("li").addClass("active")
.siblings().removeClass("active");
# return false to cancel the default action
# and prevent it from bubbling (further) up:
return false;
});
更改“UL”到任何相匹配只所需的列表(一个或多个),例如“.linksList”, “#nav” 等。
不隶属于 StackOverflow