1, first to the jquery website to download JS Library, URL for http://jquery.com/
2, build a jquery sample project.
3, put the JS library into the jquery sample project.
4. Write an HTML page
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "Author" content= "Kong.yee"/>
<meta http-equiv= "Corporation" content= "Guangzhou Kuang Xing 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 Color * *
Background: #f00;
/* Font Color * *
Color: #fff;
width:80px;
}
UL, Li {
* * Clear UL and Li on the default small dots * *
List-style:none;
}
UL {
/* Clear the Indent value of submenu * *
PADDING:0;/*IE8,IE9, Firefox can be ie7,ie6,ie5.5.
margin:0;/* are all available.
}
</style>
<script type= "Text/javascript" >
$ (function () {
SetColor is the 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>
<body>
<div id= "div" >
<ul>
<li> Landscape Menu 1</li>
<li> Landscape Menu 2</li>
<li> Landscape Menu 3</li>
<li> Landscape Menu 4</li>
<li> Landscape Menu 5</li>
<li> Landscape Menu 6</li>
</ul>
</div>
</body>
5. Operation Effect Chart
