添加类：addClass(类名)
//添加单个类
$('#div1').addClass('fontSize30');
//添加多个类
$('#div1').addClass('fontSize30 width200');
移除类： removeClass(类名)
//移除单个类
$('#div1').removeClass('fontSize30');
//移除多个类
$('#div1').removeClass('fontSize30 width200');
//移除所有类
$('#div1').removeClass();
判断类：hasClass(类名)
//判断元素有没有某个类
console.log($('#div1').hasClass('fontSize30'));
切换类：toggleClass(类名)
//如果元素有某个类，就移除这个类；如果没有，就添加这个类
$('#div1').toggleClass('fontSize30');
完整案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class操作</title>
<style>
div{
width: 100px;
height: 100px;
margin-top: 10px;
}
.bgc{
background-color: green;
}
.fontSize30{
font-size: 30px;
}
.width200{
width:200px;
}
</style>
</head>
<body>
<input type="button" value="添加类" id="addClass" />
<input type="button" value="移除类" id="removeClass" />
<input type="button" value="判断类" id="hasClass" />
<input type="button" value="切换类" id="toggleClass" />
<div id="div1" class="bgc">div</div>
</body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
$(function(){
//1.添加类 addClass(类名)
$('#addClass').click(function(){
//添加单个类
// $('#div1').addClass('fontSize30');
//添加多个类
$('#div1').addClass('fontSize30 width200');
});
//2.移除类 removeClass(类名)
$('#removeClass').click(function(){
//移除单个类
// $('#div1').removeClass('fontSize30');
//移除多个类
// $('#div1').removeClass('fontSize30 width200');
//移除所有类
$('#div1').removeClass();
});
//3.判断类：hasClass(类名)
$('#hasClass').click(function(){
//判断元素有没有某个类
console.log($('#div1').hasClass('fontSize30'));
})
//4.切换类：toggleClass(类名)
$('#toggleClass').click(function(){
//如果元素有某个类，就移除这个类；如果没有，就添加这个类
$('#div1').toggleClass('fontSize30');
})
})
</script>
案例：tab栏切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab栏切换</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.wrapper{
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top:100px ;
}
.tab{
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li{
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #FFFFFF ;
}
.tab span{
position: absolute;
right: 0;
top:10px;
background: #DDDDDD;
width: 1px;
height: 14px;
overflow: hidden;
}
.products .main{
float: left;
display: none;
}
.products .main.selected{
display: block;
}
.tab li.active{
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌</li>
<li class="tab-item">国妆名牌</li>
<li class="tab-item">清洁用品</li>
<li class="tab-item">男士精品</li>
</ul>
<div class ="products">
<div class="main selected">
<a href=""><img src="img/2.jpg" alt="" /></a>
</div>
<div class="main ">
<a href=""><img src="img/3.jpg" alt="" /></a>
</div>
<div class="main ">
<a href=""><img src="img/4.jpg" alt="" /></a>
</div>
<div class="main ">
<a href=""><img src="img/5.jpg" alt="" /></a>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
$(function(){
//(1)给tab栏的每一个li标签添加移入事件，当前li添加active类，其他兄弟组件移除action类
//(2)找到当前tab栏索引一致的div，让他添加selected类，其他的兄弟移除selected类
$('.tab').children().mouseenter(function(){
$(this).addClass('active').siblings('li').removeClass('active');
var idx = $(this).index();
console.log(idx);
$('.products').children('div').eq(idx).addClass('selected').siblings().removeClass('selected');
})
})
</script>
网友评论