<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.active{
background-color: orange;
color: #fff;
}
</style>
</head>
<body>
<input type="button" value="添加active">
<input type="button" value="移除active">
<input type="button" value="切换active">
<ul>
<li class="item">我是li1</li>
<li class="item">我是li2</li>
<li class="item">我是li3</li>
</ul>
<!-- 1.需要引入外部的jQuery文件 -->
<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$("input").eq(0).click(function () {
//添加类名 active
$(".item").addClass("active");
})
$("input").eq(1).click(function () {
//删除类名active
$(".item").removeClass("active");
})
$("input").eq(2).click(function () {
//如果有active这个类名,则删除这个类名,反之,则添加这个类名
$(".item").toggleClass("active");
})
})
</script>
</body>
</html>上述运行结果：
扫一扫
1024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
