点击链接时激活li
Active li on link click
我正在尝试在选项卡上应用选定/活动效果。因此,当选择一个选项卡时,它应该在其上应用活动类,默认情况下,第一个选项卡是活动类。我试过使用jquery函数,但似乎不起作用:
jsfiddle:http://jsfiddle.net/8thrh/82/
$(function() {
$('#nav').find('a').click(function(e) {
e.preventDefault();
$(this.hash).show().siblings().hide();
}).filter(':first').click();
});
$('a').on('click',function(){
$('li').removeClass('active');
$(this).addClass('active');
});
#nav li {
display: inline-block;
padding: 10px 11px;
background: #fff !important;
margin-right: 6px;
}
#nav ul {
}
#nav li a {
color: #000;
text-decoration: none;
text-transform: uppercase;
}
.active {
background: #000000 !important;
color: #fff;
}
<ul id="nav">
<li><a href="#part-1">Leage of Legends</a></li>
<li><a href="#part-2">CS:GO</a></li>
<li><a href="#part-3">Dota2</a></li>
<li><a href="#part-3">Hearthstone</a></li>
</ul>
<div id="content">
<div id="part-1">
Ma première partie
</div>
<div id="part-2">
Ma deuxième partie
</div>
<div id="part-3">
Ma troisième partie
</div>
</div>
不需要两个不同的点击绑定:
$(function() {
$('#nav').find('a').click(function(e) {
e.preventDefault();
$(this.hash).show().siblings().hide();
$('#nav').find('a').parent().removeClass('active')
$(this).parent().addClass('active')
}).filter(':first').click();
});
http://jsfiddle.net/9c2kxz09/1/
CSS也是错误的;nav li
背景不能设为!important
,它将覆盖active
类。
我清理了css:http://jsfiddle.net/9c2kxz09/4/
$('a').click(function() {
$('a').removeClass('active');
$(this).addClass('active');
});
这是jQuery单击事件的基本概要。根据需要进行修改,但要确保删除类并将其添加到同一元素中。希望这有帮助:)
主要问题是,在您的fiddle中,您包含了jQuery 1.6,一个非常旧的版本。至少包括1.9.1。
$('a').on('click',function(){
$('li a').removeClass('active');
$(this).addClass('active');
}).first().click();
http://jsfiddle.net/8thrh/87/
相关文章:
- 激活chrome上的chrome.notifications对象
- 提示使用服务器端事件处理程序激活JavaScript
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 如何从外部页面激活非默认引导选项卡
- 更改li标记文本的Javascript
- 选项卡侦听器未被来自后台脚本的消息激活
- 完全可链接的li元素
- 基于localStorage的Meteor激活模板
- 使用jquery动态创建ul-li
- tiltSlider播放/暂停视频元素(如果li有当前类)
- 使用下拉列表筛选列表(ul>li)
- 在bootstrap中显示隐藏特定的li
- 如何通过按键激活按钮应用CSS效果
- 在BoilerplateJS浏览器加载所有脚本(在其他模块中),而不考虑激活的模块
- 点击链接时激活li
- 如何在页面刷新后激活父级ul li或单击子菜单链接
- 我如何瞄准或聚焦当输入被聚焦时激活的下拉列表li
- 根据url设置li激活
- 通过javascript激活li