jq实现给标签添加类名

1.点击单个标签，添加或删除类名
可以用在：开发手机端页面时，头部的导航的显示隐藏以及图标的改变；
下面代码为例：（部分无关紧要的代码有删除，但不影响效果）
HTML

<div id="m_header" class="m_header">
	<div class="m_header_box">
		<div class="container_me">
			<div class="header_top">
				<div class="headerTop_box">
					<div class="header_logo">
						<a href="###">
							<img class="logo" src="img/logo_home.png" />
						</a>
					</div>
					<div class="navIcon">
						<div class="nav_line nav_line1"></div>
						<div class="nav_line nav_line2"></div>
						<div class="nav_line nav_line3"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="m_menu" id="m_menu">
		<div class="m_menu_box">
			<ul>
				<div class="m_nav_link">
					<a href="/">
						<span class="b_Item">HOME</span>
						<img src="img/icon/jiantou.png">
					</a>
				</div>
				<div class="m_nav_link">
					<a href="/products/">
						<span class="b_Item">OTHER PRODUCTS</span>
						<img src="img/icon/jiantou.png">
					</a>
				</div>
			</ul>
		</div>
	</div>
</div>

JS
点击图标按钮，分别给图标和菜单添加类名为line_move和show。
当点击的时候先判断是否已经添加过类名，有就删除，没有就添加，这就可以正常控制图标的变化以及菜单的显示与隐藏。
注：这里的显示隐藏我是由div的高度来控制的。

$(".navIcon").click(function() {
	if($(".navIcon").hasClass("line_move")) {
		$(".navIcon").removeClass('line_move'); 
	} else {
		$(".navIcon").addClass('line_move'); 
	}
	if($(".m_menu").hasClass("show")) {
		$(".m_menu").removeClass('show'); 
	} else {
		$(".m_menu").addClass('show');  
	}
});

CSS
添加类名line_move和show之后，样式作出修改。
图标：点击前是三条线，点击后先将第二条线隐藏，其余两条分别作出相应的旋转来达到想要的页面效果；
菜单：点击前height:0;，点击后height:1400px;（点击后的高度根据需要来设定）；

/*图标代码*/
.navIcon .nav_line{
	width: 35px;
	height: 3px;
	background-color: #e73299;
	border-radius: 10px;
	transition: all 0.4s;
}
.navIcon .nav_line1{
	transform-origin: left top 0;
	margin-bottom: 9px;
}
.navIcon .nav_line2{
	margin-bottom: 9px;
}
.navIcon .nav_line3{
	transform-origin: left bottom 0;
}
.navIcon.line_move .nav_line{
	transition: all 0.4s;
}
.navIcon.line_move .nav_line1{
	transform: rotate(45deg);
}
.navIcon.line_move .nav_line2{
	opacity: 0;
}
.navIcon.line_move .nav_line3{
	transform: rotate(-45deg);
}

/*导航菜单*/
.m_menu{
	width: 100%;
	height: 0;
	background-color: #fdfdfd;
	overflow-y: scroll;
   	transition: all 1s;
}
.m_menu::-webkit-scrollbar {
	display: none;
}
.m_menu.show{
	height: 1400px;
}
.m_menu_box{
	width: 90%;
	margin: 0 auto;
}

效果图如下：

• 点击前：
  
• 点击后：
  
  2. 点击多个标签，根据点击的哪个来添加或删除类名
  HTML

<div class="about_menu">
	<div class="aboutMenu_box">
		<ul>
			<li class='active'>
				<a href='###'>品牌介绍</a>
			</li>
			<li>
				<a href="###">一站式解决方案</a>
			</li>
			<li>
				<a href="###">企业宣传片</a>
			</li>
		</ul>
	</div>
</div>

JS
点击哪个就为哪个添加类名：active，并删除其兄弟元素的类名。
注：这里的显示隐藏我是由div的高度来控制的。

<script type="text/javascript">
	$(function() {
		$(".aboutMenu_box li").bind("click", function() {
			$(this).siblings('li').removeClass('active'); //删除其他兄弟元素的类名
			$(this).addClass('active');
		});
	})
</script>

CSS
添加类名active之后，样式作出修改。

.about_menu {
	width: 100%;
	background-color: #f2f2f2;
}
.aboutMenu_box {
	max-width: 1200px;
	margin: 0 auto;
}
.about_menu ul li {
	display: inline-block;
}
.about_menu a {
	display: inline-block;
	color: #333;
	font-size: 15px;
	line-height: 60px;
	padding: 0 30px;
}
.about_menu a:hover {
	background-color: #e73299;
	color: #fff;
}
.about_menu li.active a {
	background-color: #e73299;
	color: #fff;
}

效果图如下：

• 点击前（默认样式）：
  
• 点击后：
  
  jq可在此下载：https://www.jb51.net/zt/jquerydown.htm
  如有错误请各位大神评论指教……