防汽车之家带字母分类特效jquery

    xiaoxiao2021-03-26  6

    <!DOCTYPE HTML> <html> <head> </head> <style> h1 a{margin-left: 10px;} </style> <script src="http://code.jquery.com/jquery-2.0.0.js"></script> <script> var json =  { "BM1":"宝马", "BM2":"宝马x8", "BM3":"宝马x6", "BC4":"奔驰so", "AD5":"奥迪", "AD6":"奥迪1", "CC7":"卡丁车1", "CC8":"卡丁车2", "CC9":"卡丁车3", "DD11":"大众1", "DD22":"大众2", "DD33":"大众3", "DD44":"大众4", "EE55":"伊利1", "EE66":"伊利2", "EE77":"伊利3", "EE88":"伊利4", "FF99":"丰田1", "FF12":"丰田2", "FF13":"丰田3", "FF14":"丰田4", "FF15":"丰田5", "GG16":"旮旯里1", "GG17":"旮旯里2", "GG18":"旮旯里3", "HH19":"回火1", "HH10":"回火2", "HH1":"回火3", "HH2":"回火4", "II3":"以i2", "II4":"以i3", "II5":"以i4", "II6":"以i5" } $(function(){ var arr = ["A","B","C","D","E","F","G","H","I"]; var html = ""; var data = ""; for (var i = 0 ; i<arr.length ; i++) { html += ' <a href="javascript:;">'+arr[i]+'</a>'; } $(".A").append("<h1>"+html+"</h1>"); $(".A").find("a").each(function(){ $(this).click(function(){ data = ""; for (var v in json ) { if(v.charAt(0)==$(this).text()){ data +="<h2>"+json[v]+"</h2>"; } } $(".B").html(data); }) }) for(var v in json){ if(v.charAt(0)=="A"){ data +="<h2>"+json[v]+"</h2>"; } } $(".B").html(data); }) </script> <body> <div class="A"> </div> <div class="B"> </div> </body> </html>
    转载请注明原文地址: https://ju.6miu.com/read-500051.html

    最新回复(0)