jQuery实现导航栏的样式切换

最新推荐文章于 2025-06-19 14:35:59 发布

原创最新推荐文章于 2025-06-19 14:35:59 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #导航栏样式切换

jQuery 专栏收录该内容

7 篇文章

订阅专栏

样式：

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>

方法一：

$li = $('ul>li');
// console.log($li);
	$li.bind('click',function(){
		$this=$(this);
		$this.addClass('active');
		$this.siblings().removeClass('active');
		console.log('111');
	});

方法二：（原生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';
    }
 }