jquery导航栏点击选中效果
·
html代码:
<header>
<div class="navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">项目</a></li>
</div>
</header>
style样式代码:
header {
background-color: #3A94FF;
color: #FFF;
}
header a{
color: #FFF;
text-decoration: none;
}
li {
line-height: 50px;
background-color: #3A94FF;
display: inline-block;
padding: 0 20px;
}
li.active {
background-color: rgba(255,142,0,1.00);
}
js代码:
<script>
$(document).ready(function (){
$(".navbar-nav>li").each(function(index){
$(this).click(function(){
$("li").removeClass("active");
$("li").eq(index).addClass("active");
});
});
});
</script>
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)