欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery实现简单导航栏的样式切换

程序员文章站 2022-06-23 17:12:35
style css样式部分: ul{ margin: 0 auto; height: 50px; background-color: #369;} ul>li{ text-decoration: none; display: inline-block; height: 50px; line-heig ......

style css样式部分:

ul{
margin: 0 auto;
height: 50px;
background-color: #369;
}

ul>li{
text-decoration: none;
display: inline-block;
height: 50px;
line-height: 50px;
color: #fff;
padding: 0 15px;
border-left: 1px solid #365;

}
.active,ul>li:hover{
background-color: #fff;
color: #369;
cursor: pointer;
}

html部分:

<ul>
<li>首页</li><li>关于我们</li><li>产品中心</li><li>新闻中心</li><li>关于我们</li>
</ul>

方法一:https://www.jkys120.com/article/95498/

$li = $('ul>li');
// console.log($li);
$li.bind('click',function(){
$this=$(this);
$this.addclass('active');
$this.siblings().removeclass('active');
console.log('111');
});https://www.jkys120.com/article/95498/


方法二:(原生js)

for(let i = 0 ;i < navs.length; i++){
navs[i].onclick = function(e){
let activednav = this.parentnode.queryselector('.active');
if(activednav == this){
return;
}
activednav.classname = '';
this.classname = 'active';
}
}