常用代码 - 切换当前的class

本文导航

  1. 应用场景

  • 作者：KK

  • 发表日期：2016.11.26

应用场景

比如有N个菜单，点击A就让A高亮，点击B就让B高亮但A要取消高亮，点击其它也是这样

效果：

代码：

<html>
<head></head>
<style>
ul{list-style-type:none;}
.menu{float:left; margin-right:7px; cursor:pointer;}
.current{color:red; font-weight:bold;}
</style>
<body>
<ul id="menus">
	<li class="menu J-menu current">首页</li>
	<li class="menu J-menu">产品介绍</li>
	<li class="menu J-menu">新闻动态</li>
	<li class="menu J-menu">客户案例</li>
	<li class="menu J-menu">关于我们</li>
</ul>
<script src="http://www.kkh86.com/js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
	$('#menus').on('click', '.J-menu', function(){
		$(this).addClass('current').siblings().removeClass('current');		
	});
});
</script>
</body>
</html>