This example describes the effect of jquery simple implementation of the classification navigation layer of the East Beijing. Share to everyone for your reference, specific as follows:
<script src= "Jquery-1.11.1.min.js" type= "Text/javascript" ></script> <script
Type= "Text/javascript" > $ (function () {var alink01 = $ (". Item > UL");
Alink01.hover (function () {//alert div var divid = $ (this). Find ("div"). attr ("id"); var div = $ ("#" + divID); To float the layer next to this element div.css ("position", "absolute"); Allow this layer to absolutely position var self = $ (this);
Current Object Div.css ("Display", "block"); var p = self.position (); Gets the left and top var x = P.left + self.width () of this element; Get the left div.css of this floating layer ("left", X + 45);
20140916 Modify Div.css ("Top", p.top);
Div.show ();
MouseEnter $ (this). Removeclass ("Unfocus")-addclass ("Focus");
The function () {var divID = $ (this). Find ("div"). attr ("id"); var div = $ ("#" + divID);
To float the layer next to this element Div.css ("display", "none");
MouseLeave $ (this). Removeclass ("the Focus"). AddClass ("Unfocus");
});
}); </script>
<div class= "Leftbody" > <div class= "Item" > <span> all Categories </span> <ul class= "Focus" > &L T;li ><strong>php</strong> <br/> php Basic Syntax php instance </li> </ul> <ul class= "unf
OCUs "> <li ><strong>java</strong> <br/> Java syntax Java object-oriented </li> </ul> <ul class= "Unfocus" > <li ><strong>Python</strong> <br/> Python syntax python graphics processing &
lt;/li> </ul> <ul class= "Unfocus" > <li ><strong>javascript</strong> <br/> JavaScript slide JavaScript page special effects </li> </ul> <ul class= "Unfocus" > <li ><strong>c #</strong> <br/> C # desktop application C # Network program </li> </ul> <ul class= "Unfocus" > <li &G T;<strong>vc++</strong> <br/> VC + + System Program Development VC + + Network program </li> </ul> <ul class= "unf OCUs "> <li";<strong>delphi</strong> <br/> Delphi Desktop Program Delphi game development </li> </ul> </div> &
Lt;/div>
More interested readers of jquery-related content can view the site's topics: A summary of Ajax usage in jquery, a summary of jquery table (table) operations tips, a summary of jquery drag-and-drop effects and techniques, a summary of jquery extension techniques, jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery selector usage Summary" and "jquery common Plug-ins and Usage summary"
I hope this article will help you with the jquery program design.