Jquery implements simple navigation button focus background replacement (instead of CSS hover) and pops up the Sub-menu my first blog

This is my first blog post. I am interested in computer network and web programming development, and sometimes I try to write a little java. At present, I am in college and I am just getting started with my knowledge. In the future, I plan to write some questions and knowledge I have encountered, and record them and give them some advice. This will not only facilitate future access, but also provide an environment for discussion and learning.

 

Not long ago, I started to contact jquery. I used jquery to replace JavaScript and CSS hover in a simple web page navigation bar for background replacement and pop-up sub-menus, which is a simple entry.

 

Previously, CSS hover pseudo classes were often used in simple navigation bars to create background changes for mouse focus:

A: link {color: # c0c0c0; font-size: 12px; font-family:; text-Decoration: none;} A: hover {color: #66 CCFF; font-size: 12px; font-family:; text-Decoration: none ;}

In this way, you can easily replace the color background or add the image below, but there are also some disadvantages, such as the compatibility of labels (IE6 does not support hover for labels other than):

div {background:url(/images/img1.jpg) repeat-X right top;}div a:hover{background:url(/images/img2.jpg) repeat-X right top;}

If you use other labels with Hover, you have to face compatibility issues:

. Menu ul Li: hover,. Menu ul Li. funchover {// use js to define the funchover method Background: URL (/images/img2.jpg) Repeat-X right top ;}

At the same time, it is noted that the use of such pseudo classes also has an important sequence problem, that is, the four pseudo classes link, visited, hover, and active must be strictly ordered, and a: hover must be located at: after link and a: visited, A: active must be located after a: hover.

a:link {color: #FF0000}a:visited {color: #00FF00}a:hover {color: #FF00FF}a:active {color: #0000FF}

In addition, the filter is used before, and the text in the link is filtered together. The effect is not good. We do not recommend that you use the filter:

.demo a:hover{filter:alpha(opacity=100,finishopacity=80,style=1);background:url(/images/img2.jpg) repeat-X right top;}

 

Later, it was often used to replace the onmouseover onmouseout event in JavaScript to ensure compatibility and simplicity. For example:

JS section:

function over(id){var getsrc=document.getElementById(id);getsrc.src="images/menu_hover_"+id+".png";}function out(id){var getsrc=document.getElementById(id);getsrc.src="images/menu_"+id+".png";}

HTML section:

I tried to write it with jquery today. jquery's encapsulation is very powerful, and the selector is also very practical. It is very convenient to use:

 

$("#menu img").mouseover(function(){$(this).attr("src","images/menu_hover_"+$(this).attr("id")+".png");})$("#menu img").mouseout(function(){$(this).attr("src","images/menu_"+$(this).attr("id")+".png");})

At the same time, a sub-menu is added, and jquery's slideup () slidedown () is used for progressive display and fading:

$("#07 "). click (function () {if ($ ("# submenu_sub_07 "). is (": hidden") {$ ("# submenu_sub_07 "). slidedown ("slow");} else {$ ("# submenu_sub_07 "). slideup ();} // fadein () and fadeout () are also available })

HTML section:

<Div id = "submenu_sub_07" style = "display: none;"> <! -- Sub-menu --> </div>

 

It is more elegant to change the display attribute than to use the native method of JavaScript. This is the implementation effect (the original image material comes from the network ):

 

Fadein (), fadeout (), slidedown (), and slideup () are used in roughly the same way. There are two optional parameters. One is the duration of the action, in milliseconds, you can also use the predefined string "slow", "normal", "fast". Another parameter is the callback function called after the action is completed.

Position: absolute; should be used in the style to locate the part with pop-up actions (relative is used for the parent level) to avoid sinking of the elements below. For example, the pop-up menu position in the text:

#submenu {position:absolute;height:125px;width:980px;}

 

 

Think of a cainiao problem that has been committed a long time ago. In JavaScript, use getelementbyid () to get the element and change the image address, and try to write it like this:

var target=document.getElementById(id).src;target="images/pic0.png";

 

After writing the script, check and find that it does not work, and then start checking the "Shotgun" error, including checking the syntax of each tag cannot be solved. Finally, the error is found to be so low-level: getelementbyid (ID ). SRC does not get an object, but a string, and then assigns a value to this target. The original object is certainly not affected .. It should be written as follows:

var target=document.getElementById(id);target.src="images/pic0.png";

Or directly:

document.getElementById(id).src="images/pic0.png";

This is a problem of changing object attributes. the Object ID = ID is obtained, while SRC is the object attribute. Only the attribute values can be obtained.

With the idea of writing blogs, I would like to commemorate this low-level mistake in this first blog post as a warning for the future.

Start with a newbie. Thank you for your criticism ~