JQuery toggleClass application instance of of
- 2020-03-30 02:34:02
- OfStack
1. First, download the js library from the official website of jQuery at http://jquery.com/
2. Create a jQuery sample project.
3. Put the js library in the jQuery sample project.
4. Write an HTML page
5. Operation effect drawing
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/20140406165449.gif? 201436165518 ">
2. Create a jQuery sample project.
3. Put the js library in the jQuery sample project.
4. Write an HTML page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="author" content="Kong.Yee"/>
<meta http-equiv="corporation" content=" Guangzhou kuangxing software technology co. LTD "/>
<meta http-equiv="contact" content="791663094 or kong.yee@foxmail.com"/>
<script type="text/javascript" language="JavaScript" src="js/jquery-1.10.2.js"></script>
<title>Insert title here</title>
<style type="text/css">
.bg{
background: #f00;
color: #fff;
width: 80px;
}
ul, li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
$(function(){
//SetColor is a method of mouse movement
$("li").mouseover(setColor).mouseout(setColor);
function setColor(){
//Delete (add) a class if it exists (does not exist)
$(this).toggleClass("bg");
}
});
</script>
</head>
<body>
<div id="div">
<ul>
<li> Horizontal menus 1</li>
<li> Horizontal menus 2</li>
<li> Horizontal menus 3</li>
<li> Horizontal menus 4</li>
<li> Horizontal menus 5</li>
<li> Horizontal menus 6</li>
</ul>
</div>
</body>
</html>
5. Operation effect drawing
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/20140406165449.gif? 201436165518 ">