JQuery focus diagram
1 <! Doctype html> 2 // Method 1: super easy-to-understand Method 26/* $ ("ul li: nth-child (1) "). click (function (event) {27 $ ("img "). attr ("src", "images/1.jpg") 28 29 var imgsrc = $ (this ). attr ("href") 30 $ ("img "). attr ("src", imgsrc) 31 32 $ ("img "). attr ("src", $ (this ). attr ("href") 33 34 $ ("ul li: nth-child (1)" ).css ("background-color", "red ") 35 $ ("ul li: nth-child (2)" ).css ("background-color", "#494a93") 36 $ ("ul li: nth-child (3) ").css (" background-color "," #494a93 ") 37 $ (" ul li: nth-child (4) ").css (" background-color ", "#494a93") 38 event. preventDefault (); 39}) 40 $ ("ul li: nth-child (2) "). click (function (event) {41 $ ("img "). attr ("src", "images/2.jpg") 42 43 var imgsrc = $ (this ). attr ("href") 44 $ ("img "). attr ("src", imgsrc) 45 46 $ ("ul li: nth-child (2)" ground .css ("background-color", "red ") 47 $ ("ul li: nth-child (1)" ground .css ("background-color", "#494a93") 48 $ ("ul li: nth-child (3) ").css (" background-color "," #494a93 ") 49 $ (" ul li: nth-child (4) ").css (" background-color ", "#494a93") 50 event. preventDefault (); 51}) 52 $ ("ul li: nth-child (3) "). click (function (event) {53 $ ("img "). attr ("src", "images/3.jpg") 54 55 var imgsrc = $ (this ). attr ("href") 56 $ ("img "). attr ("src", imgsrc) 57 58 $ ("ul li: nth-child (3)" ground .css ("background-color", "red ") 59 $ ("ul li: nth-child (2)" ).css ("background-color", "#494a93") 60 $ ("ul li: nth-child (1) ").css (" background-color "," #494a93 ") 61 $ (" ul li: nth-child (4) ").css (" background-color ", "#494a93") 62 event. preventDefault (); 63}) 64 $ ("ul li: nth-child (4) "). click (function (event) {65 $ ("img "). attr ("src", "images/4.jpg") 66 67 var imgsrc = $ (this ). attr ("href") 68 $ ("img "). attr ("src", imgsrc) 69 70 $ ("ul li: nth-child (4)" ground .css ("background-color", "red ") 71 $ ("ul li: nth-child (2)" ).css ("background-color", "#494a93") 72 $ ("ul li: nth-child (3) ").css (" background-color "," #494a93 ") 73 $ (" ul li: nth-child (1) ").css (" background-color ", "#494a93") 74 event. preventDefault (); 75 })*/
// Method 2: simplifies the amount of code repeated by method 1. Use. parent (). siblings (). find ("a") to select other sibling elements of the parent level.
76 $ ("ul li "). click (function (event) {77/* $ ("img "). attr ("src", "images/4.jpg") */78 79 var imgsrc = $ (this ). attr ("href"); 80 $ ("img "). attr ("src", imgsrc); 81 82 outputs (this).css ({"background-color": "red", "color": "yellow"}); 83 $ (this ). parent (). siblings (). find ("a" ).css ({"background-color": "#494a93", "color": "white"}); 84 event. preventDefault (); 85 86 var txt = $ (this ). attr ("title"); 87 console. log (txt); // output 88 $ ("p") on the console "). text (txt); 89}) 90/* $ ("ul li "). hover (function (event) {91 outputs (this).css ("background-color", "red"); 92}, function () {93 outputs (this).css ("background-color ", "#494a93") 94}) */95 </script> 96 </body> 97
The above is a simple focus graph example. The idea is that the image path is written in the href attribute of tag a. Click a to get $ (this ). attr ("href"); and the value is given to the src of the img. Use jQuery to write a click event.