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

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部分：

• 首页

• 关于我们

• 产品中心

• 新闻中心

• 关于我们

方法一：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[i].onclick = function(e){
     let activedNav = this.parentNode.querySelector('.active');
     if(activedNav == this){
       return;
     }
     activedNav.className = '';
     this.className = 'active';
   }
}