html导航栏切换,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.length; i++){

navs[i].onclick = function(e){

let activedNav = this.parentNode.querySelector('.active');

if(activedNav == this){

return;

}

activedNav.className = '';

this.className = 'active';

}

}